连接预览工具

连接预览工具会创建一个待处理连接的直观预览。通过它，您可以了解拖动区块在被放下后会连接在哪里。

默认连接预览器会将插入标记放置在连接块的位置。它还会突出显示连接，并对将要替换和断开连接的块施加淡出效果。

待处理连接的种类

待处理连接有两种。一种情况下，丢弃的块会替换现有块，而现有块会断开连接。在另一种情况下，系统会在不断开其他块的情况下插入丢弃的块。

替换

当拖动的块上的连接要连接到已有块的连接，并且无处可重新连接现有块时，就会发生替换。当拖动的块松开时，被替换的块会断开连接，而拖动的块会在原位连接。

默认情况下，我们会通过在要替换的块上添加淡出效果来指示这一点。

插入

插入发生在两种情况下。当拖动的块上的连接将要连接到空连接时，就会发生这种情况。当拖动的块上的连接即将转到已有块的连接时，就会发生这种情况，但它可以在两个现有块之间插入，这样现有块就不会断开连接。

默认情况下，我们通过创建插入标记并突出显示将要连接的连接来指示这一点。

创建自定义预览工具

如果您想使用其他可视化方式来预览待处理的连接，可以创建自定义 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,
  },
};

如需详细了解注册，请参阅注入子类。