Copia e incolla

Blockly supporta le operazioni di copia, taglio e incolla per una serie di componenti integrati, come blocchi, commenti dello spazio di lavoro e bolle.

Comportamento predefinito degli appunti

Blockly core è dotato di scorciatoie da tastiera che possono tagliare, copiare o incollare blocchi, commenti dello spazio di lavoro e qualsiasi altro componente che implementi le interfacce ICopyable, IDraggable e IDeletable. Inoltre, è disponibile un'opzione del menu contestuale per duplicare un blocco. Puoi modificare o rimuovere queste scorciatoie ed elementi di menu predefiniti in base alle esigenze.

Nell'implementazione predefinita degli appunti, gli oggetti copiabili possono essere incollati solo nello spazio di lavoro da cui sono stati copiati o nello spazio di lavoro di destinazione se sono stati copiati da un riquadro a comparsa. Ciò significa che puoi copiare un blocco da un riquadro a comparsa nello spazio di lavoro di destinazione del riquadro a comparsa, ma non puoi copiare un blocco da uno spazio di lavoro principale a un altro.

Copiare e incollare tra spazi di lavoro e schede

Se vuoi consentire agli utenti di copiare blocchi da uno spazio di lavoro e incollarli in un altro spazio di lavoro o anche in uno spazio di lavoro in una copia dell'applicazione in esecuzione in un'altra scheda, puoi installare il plug-in @blockly/plugin-cross-tab-copy-paste.

Comportamento personalizzato degli appunti

Se vuoi un comportamento diverso, puoi implementare una clipboard personalizzata disinstallando le scorciatoie da tastiera fornite con Blockly e installandone altre che funzionano in modo diverso. Per facilitare questa operazione, puoi utilizzare i metodi nello spazio dei nomi Blockly.clipboard per copiare, incollare o per un controllo più granulare, ad esempio per impostare lo spazio di lavoro da cui è stato copiato un oggetto.

Oggetti copiabili personalizzati

È possibile rendere compatibili elementi arbitrari con il sistema di copia/incolla utilizzando cinque interfacce: ICopyable, IDraggable e IDeletable per rappresentare gli oggetti che possono essere copiati, ICopyData per rappresentare gli oggetti copiati e IPaster per rappresentare gli oggetti che possono trasformare i dati copiati in oggetti copiabili. Ogni tipo di ICopyable ha bisogno di un IPaster associato in cui incollare i dati.

Qualsiasi oggetto che implementa ICopyable,IDraggable e IDeletable e che ha un IPaster e un ICopyData corrispondenti funzionerà automaticamente con il sistema di appunti predefinito.

Esistono pochissime circostanze in cui è consigliabile implementare un oggetto copiabile personalizzato o un oggetto incollabile personalizzato (ad es. il plug-in di selezione multipla), perché gli oggetti copiabili vengono visualizzati e non puoi aggiungere nuovi oggetti visualizzati a Blockly. Gli unici oggetti di rendering che possono esistere all'interno di un workspace sono blocchi, bolle e commenti del workspace.

Implementare un elemento copiabile

Per creare un oggetto copiabile, devi implementare le interfacce ICopyable, IDraggable e IDeletable. Le ultime due interfacce sono necessarie per poter manipolare ed eliminare un oggetto incollato.

Selezionabile

L'interfaccia ICopyable estende l'interfaccia ISelectable, il che significa che devi implementare anche questi metodi e proprietà.

La selezionabilità è necessaria 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.
  }
}

Copiabile

L'interfaccia ICopyable ha un solo metodo obbligatorio, toCopyData, che restituisce una rappresentazione serializzabile in JSON dello stato dell'oggetto copiabile, che può essere utilizzata per ricrearlo.

I dati di copia devono includere anche una proprietà paster, che contiene il nome della stringa registrata associata al paster che deve incollare questi dati di copia. Per maggiori 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,
    };
  }
}

ICopyable ha anche un metodo facoltativo, isCopyable, che restituisce se un oggetto è attualmente copiabile.

Trascinabili ed eliminabili

Per informazioni sull'implementazione di IDraggable e IDeletable, vedi Elementi trascinabili personalizzati.

Implementare un paster

Per creare un paster, devi implementare l'interfaccia IPaster. Ha un solo metodo paste che accetta i dati di copia dell'elemento incollato, lo spazio 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.
  }
}

Registrazione

Dopo aver implementato un paster, devi registrarlo in modo da poterlo trovare associato a una determinata copia dei dati dalla relativa proprietà paster.

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());