Copiar e colar

O sistema de copiar e colar é composto por três coisas: objetos ICopyable, ICopyData que representam objetos copiados e objetos IPaster que podem transformar dados de cópia em objetos copiados. Cada tipo de ICopyable precisa de um IPaster associado que possa colar esses dados.

Esses sistemas são mostrados ao usuário por opções do menu de contexto e atalhos de teclado.

Existem poucas circunstâncias em que é recomendado implementar um paster copiável ou personalizado personalizado (por exemplo, o plug-in de seleção múltipla ou o plug-in para copiar em várias tabelas), porque os objetos geralmente copiáveis são renderizados e não é possível adicionar novos objetos renderizados ao Blockly. Os únicos objetos renderizados que podem existir em um espaço de trabalho são blocos, balões e comentários do espaço de trabalho.

Implementar um recurso copiável

Para criar um objeto copiável, você precisa implementar a interface ICopyable.

Selecionável

A interface ICopyable estende a interface ISelectable, o que significa que você também precisa implementar esses métodos e propriedades.

Ser selecionável é necessário porque os atalhos do teclado analisam o objeto selecionado para descobrir o que 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.
  }
}

Copiável

A própria interface ICopyable tem apenas um método, toCopyData, que retorna uma representação serializável do JSON do estado do objeto copiável, que pode ser usada para recriar o objeto copiável.

Os dados copiados também precisam incluir uma propriedade paster, que contém o nome de string registrado associado ao app de colagem que vai colar esses dados. Para mais informações sobre pasters, consulte Implementar um 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,
    };
  }
}

Implementar um adesivo

Para criar um paster, é necessário implementar a interface IPaster. Ele tem apenas um método paste, que recebe os dados de cópia da coisa que ele cola, o espaço de trabalho para colar a coisa e uma coordenada opcional, que é o local para colar a coisa.

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

Depois de implementar um adesivo, é necessário registrá-lo para que você possa encontrar o adesivo associado a determinados dados de cópia da propriedade paster.

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