Copier/coller

Le système de copier-coller repose sur trois éléments : des objets ICopyable, ICopyData représentant des objets copiés et des objets IPaster, qui peuvent reconvertir des données copiées en objets copiables. Chaque type de ICopyable nécessite un élément IPaster associé pouvant coller ces données.

Ces systèmes sont présentés à l'utilisateur via les options de menu contextuel et les raccourcis clavier.

Dans de très rares cas, vous pouvez avoir besoin d'implémenter un collage personnalisé ou un paster personnalisé (par exemple, le plug-in multi-sélection ou le plug-in de copie et de collage entre onglets), car les objets généralement copiables sont affichés et vous ne pouvez pas ajouter de nouveaux objets affichés à Blockly. Les seuls objets affichés pouvant exister dans un espace de travail sont les blocs, les bulles et les commentaires.

Implémenter un élément copiable

Pour créer un objet copiable, vous devez implémenter l'interface ICopyable.

Sélectionnable

L'interface ICopyable étend l'interface ISelectable, ce qui signifie que vous devez également implémenter ces méthodes et propriétés.

Il est obligatoire d'être sélectionnable, car les raccourcis clavier examinent l'objet sélectionné pour déterminer les éléments à copier.

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.
  }
}

Copie possible

L'interface ICopyable elle-même ne comporte qu'une seule méthode, toCopyData, qui renvoie une représentation sérialisable JSON de l'état de l'objet copiable, qui peut être utilisée pour recréer l'objet copiable.

Les données de copie doivent également inclure une propriété paster, qui contient le nom de chaîne enregistré associé au paster qui doit coller ces données de copie. Pour en savoir plus sur les collages, consultez Implémenter 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,
    };
  }
}

Implémenter un pasteur

Pour créer un paster, vous devez implémenter l'interface IPaster. Il ne comporte qu'une seule méthode paste, qui accepte les données copiées, l'espace de travail dans lequel coller l'élément et une coordonnée facultative, à savoir l'emplacement où coller l'élément.

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.
  }
}

Inscription

Après avoir implémenté un paster, vous devez l'enregistrer afin de pouvoir trouver le paster associé à une copie des données de sa propriété paster.

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