Copiar y pegar

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());