El sistema de copiado y pegado se compone de tres elementos: objetos ICopyable
, ICopyData
que representa los objetos copiados y objetos IPaster
que pueden volver a convertir los datos copiados en objetos copiables. Cada tipo de ICopyable
necesita un IPaster
asociado que pueda pegar esos datos.
Estos sistemas se muestran al usuario a través de las opciones de menú contextual y las combinaciones de teclas.
Hay muy pocas circunstancias en las que querrías implementar una copia personalizada o un pegador personalizado (p.ej., el complemento de selección múltiple o el complemento de copiar y pegar entre pestañas de forma cruzada), ya que, por lo general, se renderizan objetos que se pueden copiar y no puedes agregar nuevos objetos renderizados a Blockly. Los únicos objetos renderizados que pueden existir dentro de un lugar de trabajo son los bloques, las burbujas y los comentarios del lugar de trabajo.
Implementa una copia que se pueda copiar
Para crear un objeto copiable, debes implementar la interfaz ICopyable
.
Seleccionable
La interfaz ICopyable
extiende la interfaz ISelectable
, lo que significa que también debes implementar esos métodos y propiedades.
Es necesario poder seleccionarlos porque las combinaciones de teclas miran el objeto seleccionado para averiguar 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í tiene un solo método, toCopyData
, que muestra una representación serializable en JSON del estado del objeto copiable, que se puede usar para recrear ese objeto.
Los datos de copia también deben incluir una propiedad paster
, que contiene el nombre de string registrado asociado con el pegador que debe pegar estos datos de copia. Para obtener más información sobre los pegadores, consulta Cómo implementar un pegador.
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,
};
}
}
Implementa un pegador
Para crear un pegador, debes implementar la interfaz IPaster
. Solo tiene un método paste
que recibe los datos de copia del elemento que pega, el lugar de trabajo en el que se pegará y una coordenada opcional, que es la ubicación en la que se pegará el elemento.
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 pegador, debes registrarlo para que puedas encontrar el que está asociado con los datos de una copia determinada desde su propiedad paster
.
// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());