Copiar e colar

O Blockly oferece suporte a operações de copiar, cortar e colar para vários componentes integrados, como blocos, comentários do espaço de trabalho e balões.

Comportamento padrão da área de transferência

O núcleo do Blockly vem com atalhos de teclado que podem cortar, copiar ou colar blocos, comentários do espaço de trabalho e outros componentes que implementam as interfaces ICopyable, IDraggable e IDeletable. Ele também vem com uma opção de menu de contexto para duplicar um bloco. Você pode modificar ou remover esses atalhos e itens de menu padrão conforme necessário.

Na implementação padrão da área de transferência, os objetos copiáveis só podem ser colados no espaço de trabalho de origem ou no espaço de trabalho de destino se eles foram copiados de um menu flutuante. Isso significa que você pode copiar um bloco de um submenu flutuante para o espaço de trabalho de destino dele, mas não é possível copiar um bloco de um espaço de trabalho principal para outro.

Copiar e colar entre espaços de trabalho e guias

Se você quiser permitir que os usuários copiem blocos de um espaço de trabalho e os colem em outro espaço, ou até mesmo em um espaço de trabalho em uma cópia do aplicativo executado em outra guia, instale o plug-in @blockly/plugin-cross-tab-copy-paste.

Comportamento personalizado da área de transferência

Se você quiser um comportamento diferente, implemente uma área de transferência personalizada desinstalando os atalhos do teclado que vêm com o Blockly e instalando outros que funcionam de maneira diferente. Para facilitar isso, use métodos no namespace Blockly.clipboard para copiar, colar ou ter um controle mais refinado, como definir o espaço de trabalho de onde um objeto foi copiado.

Objetos copiáveis personalizados

É possível tornar itens arbitrários compatíveis com o sistema de copiar/colar usando cinco interfaces: ICopyable, IDraggable e IDeletable para representar objetos que podem ser copiados, ICopyData para representar objetos copiados e IPaster para representar objetos que podem transformar dados de cópia em objetos copiáveis. Todo tipo de ICopyable precisa de um IPaster associado que possa colar esses dados.

Qualquer objeto que implemente ICopyable, IDraggable e IDeletable e que tenha um IPaster e um ICopyData correspondentes vai funcionar automaticamente com o sistema de área de transferência padrão.

Há pouquíssimas circunstâncias em que você vai querer implementar um objeto copiável ou um objeto de colagem personalizado (por exemplo, o plug-in de seleção múltipla), porque os objetos 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 elemento copiável

Para criar um objeto copiável, é necessário implementar as interfaces ICopyable, IDraggable e IDeletable. As duas últimas interfaces são necessárias para que um objeto colado possa ser manipulado e excluído.

Selecionável

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

É necessário que o objeto seja selecionável 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 obrigatório, toCopyData, que retorna uma representação serializável em JSON do estado do objeto copiável, que pode ser usado para recriar o objeto.

Os dados copiados também precisam incluir uma propriedade paster, que contém o nome da string registrada associada ao colador que deve colar esses dados. Para mais informações sobre coladores, consulte Implementar um colador.

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 também tem um método opcional, isCopyable, que retorna se um objeto pode ser copiado no momento.

Pode ser arrastado e excluído

Para informações sobre como implementar IDraggable e IDeletable, consulte Elementos arrastáveis personalizados.

Implementar um paster

Para criar um paster, é necessário implementar a interface IPaster. Ele tem apenas um método paste que recebe os dados de cópia do item colado, o espaço de trabalho em que o item será colado e uma coordenada opcional, que é o local em que o item será colado.

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 paster, é necessário registrá-lo para que você possa encontrar o paster associado a um determinado dado de cópia da propriedade paster.

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