连接预览工具会创建一个待处理连接的直观预览。通过它,您可以了解拖动区块在被放下后会连接在哪里。
默认连接预览器会将插入标记放置在连接块的位置。它还会突出显示连接,并对将要替换和断开连接的块施加淡出效果。
待处理连接的种类
待处理连接有两种。一种情况下,丢弃的块会替换现有块,而现有块会断开连接。在另一种情况下,系统会在不断开其他块的情况下插入丢弃的块。
替换
当拖动的块上的连接要连接到已有块的连接,并且无处可重新连接现有块时,就会发生替换。当拖动的块松开时,被替换的块会断开连接,而拖动的块会在原位连接。
默认情况下,我们会通过在要替换的块上添加淡出效果来指示这一点。
插入
插入发生在两种情况下。当拖动的块上的连接将要连接到空连接时,就会发生这种情况。当拖动的块上的连接即将转到已有块的连接时,就会发生这种情况,但它可以在两个现有块之间插入,这样现有块就不会断开连接。
默认情况下,我们通过创建插入标记并突出显示将要连接的连接来指示这一点。
创建自定义预览工具
如果您想使用其他可视化方式来预览待处理的连接,可以创建自定义 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,
},
};
如需详细了解注册,请参阅注入子类。