Un método de vista previa de conexiones crea una vista previa de una conexión pendiente. Te indica dónde se conectará el bloque de arrastre cuando se suelte.
La vista previa de conexiones predeterminada coloca marcadores de inserción en los que se conectarán los bloques. También destaca las conexiones y aplica un efecto de atenuación en los bloques que se reemplazarán y se desconectarán.
Tipos de conexiones pendientes
Existen dos tipos de conexiones pendientes. En un caso, el bloque descartado reemplaza un bloque existente y el bloque existente se desconecta. En el otro, el bloque que se soltó se inserta sin desconectar otros bloques.
Reemplazo
El reemplazo ocurre cuando una conexión en el bloque arrastrado se conecta a una conexión que ya tiene un bloque y no hay lugar para que el bloque existente se vuelva a conectar. Cuando se suelte el bloque arrastrado, el bloque reemplazado se desconectará y el bloque arrastrado se conectará en su lugar.
De forma predeterminada, se indica esto colocando un efecto de atenuación en el bloque que se reemplaza.
Inserción
La inserción se realiza en dos casos. Ocurre cuando una conexión en el bloque arrastrado se conecta con una conexión que está vacía. Esto sucede cuando una conexión en el bloque arrastrado va a una conexión que ya tiene un bloque, pero se puede insertar entre los dos bloques existentes para que el bloque existente no se desconecte.
De forma predeterminada, esto se indica creando marcadores de inserción y destacando las conexiones que se conectarán.
Cómo crear una vista previa personalizada
Si deseas usar una imagen diferente para obtener una vista previa de las conexiones pendientes, puedes crear una implementación de IConnectionPreviewer personalizada.
Construcción y eliminación
Debes implementar un constructor y un método de eliminación para tu IConnectionPreviewer.
Se llama al constructor cada vez que comienza un arrastre de bloque, y se pasa el bloque que se está arrastrando. Si necesitas inicializar algún estado basado en el bloque, puedes hacerlo en el constructor.
class MyConnectionPreviewer implements IConnectionPreviewer {
constructor(draggedBlock: Blockly.BlockSvg) {
// Initialize state here.
}
}
Cada vez que finaliza un arrastre de bloque, se llama al método dispose. Si necesitas hacer referencia a algún estado cuando se deseche tu instancia IConnectionPreviewer, debes hacerlo aquí.
dispose() {
// Dispose of and dereference any state.
}
Crea la vista previa
Tu IConnectionPreviewer debe implementar la lógica para obtener una vista previa de las conexiones.
Reemplazo
Para obtener una vista previa de los reemplazos, implementa el método previewReplacement.
previewReplacement(draggedConn, staticConn, replacedBlock) {
// Visually indicate that the replacedBlock will be disconnected, and the
// draggedConn will be connected to the staticConn.
}
Inserción
Para obtener una vista previa de las inserciones, implementa el método previewConnection.
previewConnection(draggedConn, staticConn) {
// Visually indicate the draggedConn will be connected to the staticConn.
}
Si deseas tener una vista previa diferente en función de si el bloque arrastrado está conectado a una entrada vacía o si se inserta entre bloques, puedes comprobar si staticConn está conectado a otra conexión.
Si staticConn está conectado actualmente, entonces se inserta draggedConn entre los bloques.
previewConnection(draggedConn, staticConn) {
if (staticConn.targetConnection) {
// The dragged block is being inserted between blocks.
} else {
// The dragged block is connecting to an empty input.
}
}
Vistas previas de CSS
Puedes obtener una vista previa de las conexiones si aplicas CSS al bloque. Por ejemplo, para activar o desactivar el fundido de reemplazo predeterminado, se agrega la clase de CSS blocklyReplaceable al bloque.
previewReplacement(draggedConn, staticConn, replacedBlock) {
Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}
Vistas previas del procesador
Para obtener una vista previa de las conexiones, implementa un procesador personalizado que tenga hooks especiales de vista previa.
previewReplacement(draggedConn, staticConn, replacedBlock) {
const renderer = replacedBlock.workspace.getRenderer()
if (renderer.addReplacementIndicator) {
renderer.addReplacementIndicator(replacedBlock);
}
}
Cómo ocultar la vista previa
Tu IConnectionPreviewer debe poder ocultar vistas previas. Se llama a este método cuando el bloque arrastrado se mueve fuera del rango de todas las conexiones, por lo que no se debe mostrar ninguna vista previa. También se llama justo antes de que se deseche la vista previa.
hidePreview() {
// Remove CSS classes, toggle renderer methods, etc.
}
Registro y uso
Por último, una vez que hayas completado la creación de tu IConnectionPreviewer, deberás registrarlo. Esto asocia el procesador con una string para que puedas pasarlo a la configuración de inserción. También puedes pasar la clase IConnectionPreviewer (es decir, el constructor) directamente a la configuración de la inserción.
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,
},
};
Para obtener más información sobre el registro, consulta Cómo insertar subclases.