Copier/coller

Le système de copier-coller est constitué de trois éléments : les objets ICopyable, ICopyData représentant des objets copiés, et les objets IPaster qui peuvent reconvertir les données copiées en objets copiables. Chaque type de ICopyable a besoin d'un IPaster associé capable de coller ces données.

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

Il est très rare que vous souhaitiez implémenter une fonctionnalité de copier-coller ou de copier-coller personnalisée (par exemple, le plug-in de sélection multiple ou le plug-in de copier-coller croisé), car les objets copiables sont généralement affichés, et vous ne pouvez pas ajouter de nouveaux objets affichés à Blockly. Les seuls objets affichés qui peuvent exister dans un espace de travail sont les blocs, les bulles et les commentaires de l'espace de travail.

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 nécessaire que l'élément soit sélectionnable, car les raccourcis clavier examinent l'objet sélectionné pour déterminer ce qu'il faut 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.
  }
}

Copieable

L'interface ICopyable elle-même ne comporte qu'une seule méthode, toCopyData, qui renvoie une représentation sérialisable au format 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 colleur qui doit coller ces données de copie. Pour en savoir plus sur les pasteurs, consultez Implémenter un pasteur.

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 paster

Pour créer un outil de collage, vous devez implémenter l'interface IPaster. Il ne comporte qu'une seule méthode paste, qui reçoit les données de copie de l'élément qu'il colle, l'espace de travail dans lequel le coller et une coordonnée facultative, qui correspond à l'emplacement où le coller.

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

Une fois que vous avez implémenté un colleur, vous devez l'enregistrer afin de pouvoir trouver le colleur associé à des données de copie données à partir de sa propriété paster.

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