Copiar y pegar

El sistema de copiar y pegar se compone de tres elementos: objetos ICopyable, ICopyData que representan objetos copiados y objetos IPaster que pueden volver a convertir los datos de copia 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 opciones del menú contextual y combinaciones de teclas.

Hay muy pocas circunstancias en las que te gustaría implementar un elemento de copia personalizado o un elemento de pegado personalizado (p.ej., el complemento de selección múltiple o el complemento de copiar y pegar entre tablas), ya que, por lo general, se renderizan objetos copiables 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, los comentarios y las burbujas.

Implementa un elemento que se pueda copiar

Para crear un objeto que se pueda copiar, 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 que se puedan seleccionar, ya que las combinaciones de teclas miran el objeto seleccionado para decidir 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 solo tiene un método, toCopyData, que muestra una representación serializable en JSON del estado del objeto copiable, que se puede usar para volver a crearlo.

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 calcomanías, consulta Cómo implementar un calcomanía.

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 editor de texto

Para crear un elemento de pegado, 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 elemento de pegado, debes registrarlo para poder encontrar el elemento de pegado asociado con unos datos de copia determinados desde su propiedad paster.

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