Il sistema di copia e incolla è costituito da tre elementi: ICopyable
oggetti, ICopyData
che rappresenta gli oggetti copiati e
IPaster
oggetti che possono trasformare i dati di copia in
oggetti copiabili. Ogni tipo di ICopyable
richiede un IPaster
associato che possa incollare
questi dati.
Questi sistemi vengono mostrati all'utente tramite le opzioni del menu contestuale e le scorciatoie da tastiera.
Ci sono pochissime circostanze in cui potresti voler implementare un'istruzione copiabile personalizzata o un paster personalizzato (ad es. il plug-in Multiselect o il plug-in per la copia e incolla incrociato), dato che di solito viene eseguito il rendering degli oggetti copiabili e non è possibile aggiungere nuovi oggetti sottoposti a rendering a Blockly. Gli unici oggetti visualizzati che possono esistere all'interno di un'area di lavoro sono blocchi, bolle e commenti dell'area di lavoro.
Implementa un'immagine copiabile
Per creare un oggetto copiabile, devi implementare l'interfaccia ICopyable
.
Selezionabile
L'interfaccia ICopyable
estende l'interfaccia ISelectable
, il che significa che devi implementare anche questi metodi e queste proprietà.
È necessario che sia selezionabile perché le scorciatoie da tastiera esaminano l'oggetto selezionato per capire cosa copiare.
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.
}
}
Copiabili
L'interfaccia ICopyable
ha un solo metodo, toCopyData
, che restituisce una rappresentazione in serie JSON dello stato dell'oggetto copiabile, che può essere utilizzata per ricreare l'oggetto copiabile.
I dati della copia devono includere anche una proprietà paster
, contenente il nome stringa registrato associato all'autore del caricamento che deve incollare i dati della copia. Per ulteriori informazioni sui paster, consulta Implementare 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,
};
}
}
Implementazione di un paster
Per creare un paster, devi implementare l'interfaccia IPaster
. Ha un solo metodo, paste
, che prende i dati di copia dell'elemento, l'area di lavoro in cui incollare l'elemento e una coordinata facoltativa, ovvero la posizione in cui incollare l'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.
}
}
Iscrizione
Dopo aver implementato un paster, devi registrarlo in modo da poter
trovare il paster associato a una determinata copia dei dati della relativa proprietà paster
.
// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());