连接预览工具

连接预览程序可创建待处理连接的直观预览。它 会指示拖动区块 下降。

默认连接预览程序会放置插入标记 各块连接的位置它还突出显示连接状态 对那些将被替换和断开连接的块的影响。

内置预览器演示

待处理连接的种类

待处理的连接有两种。在一个示例中 替换现有块，并且现有块断开连接。在另一个 在这种情况下，系统会插入放下的块，而不会断开其他块的连接。

替换

当拖动块上的连接要连接时，会发生替换 一个已具有块的连接，而现有块 要重新附加的数据块当拖动的块被放下后，被替换的块将变为 将断开连接，并在原位置连接被拖动的块。

默认情况下，我们通过在正在 已替换。

内置替换功能 预览版

插入

插入在两种情况下会发生。当拖动的 将要连接到一个空的连接。这种情况发生在 所拖动块上的某个连接将会连接到已具有 但是可以将其插入两个现有块之间 地址块不会断开连接。

默认情况下，我们通过创建插入标记并突出显示 连接。

内置插入 预览版

创建自定义预览器

如果您想使用其他可视化方式来预览待处理的连接， 创建自定义 IConnectionPreviewer 实现。

建设和处置

您需要为自己的代码实现构造函数和处理方法， IConnectionPreviewer。

每当开始拖动块时，系统都会调用构造函数，并将该构造函数传递给它 拖动对象。如果您需要根据 可以在构造函数中执行此操作。

class MyConnectionPreviewer implements IConnectionPreviewer {
  constructor(draggedBlock: Blockly.BlockSvg) {
    // Initialize state here.
  }
}

每当块拖动结束时，系统都会调用 dispose 方法。如果您需要 处置 IConnectionPreviewer 实例时，对任何状态解引用， 应该在此处执行相应操作

dispose() {
  // Dispose of and dereference any state.
}

创建预览

您的 IConnectionPreviewer 需要实现用于直观地预览的逻辑 连接。

替换

如需预览替换项，请实现 previewReplacement 方法。

previewReplacement(draggedConn, staticConn, replacedBlock) {
  // Visually indicate that the replacedBlock will be disconnected, and the
  // draggedConn will be connected to the staticConn.
}

插入

如需预览插入，请实现 previewConnection 方法。

previewConnection(draggedConn, staticConn) {
  // Visually indicate the draggedConn will be connected to the staticConn.
}

如果您希望根据拖动的区块 或者，如果将它插入到空输入块之间 您可以查看“staticConn”当前是否已连接到其他连接。 如果 staticConn 目前已连接，那么 draggedConn 。

previewConnection(draggedConn, staticConn) {
  if (staticConn.targetConnection) {
    // The dragged block is being inserted between blocks.
  } else {
    // The dragged block is connecting to an empty input.
  }
}

CSS 预览

您可以通过向该块应用 CSS 来预览连接。例如， 通过添加 blocklyReplaceable CSS 类来切换默认替换淡入淡出 。

previewReplacement(draggedConn, staticConn, replacedBlock) {
  Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}

渲染程序预览

您可以通过实现自定义渲染程序来预览连接 包含特殊的预览钩子的视频

previewReplacement(draggedConn, staticConn, replacedBlock) {
  const renderer = replacedBlock.workspace.getRenderer()
  if (renderer.addReplacementIndicator) {
    renderer.addReplacementIndicator(replacedBlock);
  }
}

隐藏预览

您的 IConnectionPreviewer 需要能够隐藏预览。这称为 因此预览时 。也会在处置预览器之前调用该方法。

hidePreview() {
  // Remove CSS classes, toggle renderer methods, etc.
}

注册和使用

最后，完成 IConnectionPreviewer 的创建后， 您需要注册该密钥。这会将渲染程序与字符串相关联， 并将其传递给注入配置您还可以将 IConnectionPreviewer 类（即构造函数）添加到您的注入中 配置。

Blockly.registry.register(
  Blockly.registry.Type.CONNECTION_PREVIEWER,
  'MyConnectionPreviewer',
  MyConnectionPreviewer,
);

// You can use the string.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: 'myConnectionPreviewer',
  },
};

// Or you can pass the class / constructor directly.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: MyConnectionPreviewer,
  },
};

有关注册的更多信息，请参阅 注入子类。