Blockly est compatible avec les opérations de copier, couper et coller pour un certain nombre de ses composants intégrés, tels que les blocs, les commentaires de l'espace de travail et les bulles.
Comportement par défaut du presse-papiers
Le cœur de Blockly est fourni avec des raccourcis clavier qui permettent de couper, copier ou coller des blocs, des commentaires d'espace de travail et tout autre composant qui implémente les interfaces ICopyable, IDraggable et IDeletable. Il inclut également une option de menu contextuel permettant de dupliquer un bloc. Vous pouvez modifier ou supprimer ces raccourcis et éléments de menu par défaut si nécessaire.
Dans l'implémentation par défaut du presse-papiers, les objets copiables ne peuvent être collés que dans l'espace de travail à partir duquel ils ont été copiés, ou dans l'espace de travail cible s'ils ont été copiés à partir d'un menu déroulant. Cela signifie que vous pouvez copier un bloc depuis un menu déroulant vers l'espace de travail cible de ce menu déroulant, mais que vous ne pouvez pas copier un bloc d'un espace de travail principal vers un autre.
Copier et coller du contenu entre des espaces de travail et des onglets
Si vous souhaitez autoriser les utilisateurs à copier des blocs d'un espace de travail et à les coller dans un autre espace de travail, ou même dans un espace de travail d'une copie de votre application exécutée dans un autre onglet, vous pouvez installer le plug-in @blockly/plugin-cross-tab-copy-paste.
Comportement personnalisé du presse-papiers
Si vous souhaitez un comportement différent, vous pouvez implémenter un presse-papiers personnalisé en désinstallant les raccourcis clavier fournis avec Blockly et en installant d'autres qui fonctionnent différemment. Pour ce faire, vous pouvez utiliser des méthodes dans l'espace de noms Blockly.clipboard pour copier et coller des objets, ou pour un contrôle plus précis, comme définir l'espace de travail à partir duquel un objet a été copié.
Objets copiables personnalisés
Il est possible de rendre des éléments arbitraires compatibles avec le système de copier/coller en utilisant cinq interfaces : ICopyable, IDraggable et IDeletable pour représenter les objets pouvant être copiés, ICopyData pour représenter les objets copiés et IPaster pour représenter les objets pouvant transformer les données copiées en objets copiables. Chaque type de ICopyable a besoin d'un IPaster associé qui peut coller ces données.
Tout objet qui implémente ICopyable, IDraggable et IDeletable et qui possède un IPaster et un ICopyData correspondants fonctionnera automatiquement avec le système de presse-papiers par défaut.
Il existe très peu de cas où vous souhaiterez implémenter un objet copiable ou un objet de collage personnalisé (par exemple, le plug-in de sélection multiple), car les objets copiables sont rendus et vous ne pouvez pas ajouter de nouveaux objets rendus à Blockly. Les seuls objets affichés pouvant exister dans un espace de travail sont les blocs, les bulles et les commentaires d'espace de travail.
Implémenter un élément copiable
Pour créer un objet copiable, vous devez implémenter les interfaces ICopyable, IDraggable et IDeletable. Les deux dernières interfaces sont requises pour qu'un objet collé puisse être manipulé et supprimé.
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.
La sélection est obligatoire, 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.
}
}
Copiable
L'interface ICopyable elle-même ne comporte qu'une seule méthode requise, 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 programme qui doit coller ces données de copie. Pour en savoir plus sur les colleurs, consultez Implémenter un colleur.
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 dispose également d'une méthode facultative, isCopyable, qui indique si un objet peut être copié actuellement.
Déplaçables et supprimables
Pour savoir comment implémenter IDraggable et IDeletable, consultez Éléments déplaçables personnalisés.
Implémenter un outil de collage
Pour créer un module de collage, vous devez implémenter l'interface IPaster. Il ne comporte qu'une seule méthode, paste, qui accepte les données de copie de l'élément à coller, l'espace de travail dans lequel coller l'élément et une coordonnée facultative, qui correspond à 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
Une fois que vous avez implémenté un module de collage, vous devez l'enregistrer pour pouvoir trouver le module de collage associé à des données copié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());