Blockly admite operaciones de copiar, cortar y pegar para varios de sus componentes integrados, como bloques, comentarios del espacio de trabajo y burbujas.
Comportamiento predeterminado del portapapeles
El núcleo de Blockly incluye combinaciones de teclas que pueden cortar, copiar o pegar bloques, comentarios del espacio de trabajo y cualquier otro componente que implemente las interfaces ICopyable, IDraggable y IDeletable. También incluye una opción de menú contextual para duplicar un bloque. Puedes modificar o quitar esos atajos y elementos de menú predeterminados según sea necesario.
En la implementación predeterminada del portapapeles, los objetos copiables solo se pueden pegar en el espacio de trabajo desde el que se copiaron o en el espacio de trabajo de destino si se copiaron desde un menú desplegable. Esto significa que puedes copiar un bloque de un menú desplegable en el espacio de trabajo de destino de ese menú, pero no puedes copiar un bloque de un espacio de trabajo principal a otro.
Copiar y pegar entre espacios de trabajo y pestañas
Si quieres permitir que los usuarios copien bloques de un espacio de trabajo y los peguen en otro, o incluso en un espacio de trabajo de una copia de tu aplicación que se ejecuta en otra pestaña, puedes instalar el complemento @blockly/plugin-cross-tab-copy-paste.
Comportamiento personalizado del portapapeles
Si quieres un comportamiento diferente, puedes implementar un portapapeles personalizado desinstalando las combinaciones de teclas que vienen con Blockly e instalando otras que funcionen de manera diferente. Para facilitar esto, puedes usar métodos en el espacio de nombres Blockly.clipboard para copiar, pegar o tener un control más preciso, como establecer el espacio de trabajo desde el que se copió un objeto.
Objetos personalizados que se pueden copiar
Para que los elementos arbitrarios sean compatibles con el sistema de copiar y pegar, se pueden usar cinco interfaces: ICopyable, IDraggable y IDeletable para representar objetos que se pueden copiar, ICopyData para representar objetos copiados y IPaster para representar objetos que pueden convertir los datos de copia en objetos copiables. Cada tipo de ICopyable necesita un IPaster asociado que pueda pegar esos datos.
Cualquier objeto que implemente ICopyable, IDraggable y IDeletable, y que tenga un IPaster y un ICopyData correspondientes, funcionará automáticamente con el sistema de portapapeles predeterminado.
Hay muy pocas circunstancias en las que querrías implementar un objeto copiable personalizado o un pegador personalizado (p.ej., el complemento de selección múltiple), ya que los objetos copiables se renderizan y no puedes agregar objetos renderizados nuevos a Blockly. Los únicos objetos renderizados que pueden existir dentro de un espacio de trabajo son los bloques, las burbujas y los comentarios del espacio de trabajo.
Implementa un objeto copyable
Para crear un objeto que se pueda copiar, debes implementar las interfaces ICopyable, IDraggable y IDeletable. Las dos últimas interfaces son necesarias para que se pueda manipular y borrar un objeto pegado.
Seleccionable
La interfaz ICopyable extiende la interfaz ISelectable, lo que significa que también debes implementar esos métodos y propiedades.
Es necesario que se pueda seleccionar porque las combinaciones de teclas buscan el objeto seleccionado para determinar qué copiar.
class MyCopyable implements ISelectable {
constructor(workspace) {
this.id = Blockly.utils.idGenerator.genUid();
this.workspace = workspace;
}
select() {
// Visually indicate this draggable is selected.
}
unselect() {
// Visually indicate this draggable is not selected.
}
}
Se puede copiar
La interfaz ICopyable en sí solo tiene un método obligatorio, toCopyData, que devuelve una representación serializable en JSON del estado del objeto copiable, que se puede usar para recrear el objeto copiable.
Los datos de copia también deben incluir una propiedad paster, que contiene el nombre de cadena registrado asociado con el pegador que debe pegar estos datos de copia. Para obtener más información sobre los pasters, consulta Implementa un paster.
class MyCopyable implements ICopyable {
constructor(workspace, state) {
this.workspace = workspace;
this.myState = state;
}
toCopyData() {
return {
// This string matches the string used to register the paster.
paster: 'MY_PASTER',
state: this.myState,
};
}
}
ICopyable también tiene un método opcional, isCopyable, que devuelve si un objeto se puede copiar en el momento.
Se pueden arrastrar y borrar
Para obtener información sobre la implementación de IDraggable y IDeletable, consulta Elementos arrastrables personalizados.
Implementa un pegador
Para crear un paster, debes implementar la interfaz IPaster. Solo tiene un método paste que toma los datos de copia de lo que pega, el espacio de trabajo en el que se pega y una coordenada opcional, que es la ubicación en la que se pega.
class MyPaster implements IPaster {
paste(copyData, workspace, coordinate) {
return new MyCopyable(workspace, copyData.state);
// Optionally position the copyable at the passed coordinate.
// Optionally select the copyable after it is pasted.
}
}
Registro
Después de implementar un paster, debes registrarlo para poder encontrar el paster asociado a un determinado dato de copia desde su propiedad paster.
// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());