Blockly unterstützt Kopier-, Ausschneide- und Einfügevorgänge für eine Reihe der integrierten Komponenten, z. B. Blöcke, Arbeitsbereichskommentare und Sprechblasen.
Standardverhalten der Zwischenablage
Blockly Core bietet Tastenkombinationen zum Ausschneiden, Kopieren oder Einfügen von Blöcken, Arbeitsbereichskommentaren und allen anderen Komponenten, die die Schnittstellen ICopyable, IDraggable und IDeletable implementieren. Außerdem gibt es eine Kontextmenüoption zum Duplizieren eines Blocks. Sie können diese Standardschaltflächen und Menüelemente nach Bedarf ändern oder entfernen.
In der Standardimplementierung der Zwischenablage können kopierbare Objekte nur in den Arbeitsbereich eingefügt werden, aus dem sie kopiert wurden, oder in den Zielarbeitsbereich, wenn sie aus einem Flyout kopiert wurden. Das bedeutet, dass Sie einen Block aus einem Flyout in den Zielarbeitsbereich dieses Flyouts kopieren können, aber nicht von einem Hauptarbeitsbereich in einen anderen.
Zwischen Arbeitsbereichen und Tabs kopieren und einfügen
Wenn Sie Nutzern erlauben möchten, Blöcke aus einem Arbeitsbereich zu kopieren und in einen anderen Arbeitsbereich oder sogar in einen Arbeitsbereich in einer Kopie Ihrer Anwendung einzufügen, die in einem anderen Tab ausgeführt wird, können Sie das @blockly/plugin-cross-tab-copy-paste-Plug-in installieren.
Benutzerdefiniertes Verhalten der Zwischenablage
Wenn Sie ein anderes Verhalten wünschen, können Sie eine benutzerdefinierte Zwischenablage implementieren, indem Sie die mit Blockly gelieferten Tastenkombinationen deinstallieren und andere installieren, die anders funktionieren. Dazu können Sie Methoden im Blockly.clipboard-Namespace verwenden, um Objekte zu kopieren und einzufügen oder um eine genauere Steuerung zu ermöglichen, z. B. um den Arbeitsbereich festzulegen, aus dem ein Objekt kopiert wurde.
Benutzerdefinierte kopierbare Objekte
Beliebige Elemente können durch die Verwendung von fünf Schnittstellen mit dem Kopier- und Einfügesystem kompatibel gemacht werden: ICopyable, IDraggable und IDeletable zur Darstellung von Objekten, die kopiert werden können, ICopyData zur Darstellung kopierter Objekte und IPaster zur Darstellung von Objekten, die Kopierdaten wieder in kopierbare Objekte umwandeln können. Für jeden Typ von ICopyable ist ein zugehöriges IPaster erforderlich, in das die Daten eingefügt werden können.
Jedes Objekt, das ICopyable, IDraggable und IDeletable implementiert und ein entsprechendes IPaster und ICopyData hat, funktioniert automatisch mit dem Standard-Zwischenablagesystem.
Es gibt nur wenige Fälle, in denen Sie ein benutzerdefiniertes kopierbares Objekt oder einen benutzerdefinierten Paster (z.B. das Plugin für die Mehrfachauswahl) implementieren sollten, da kopierbare Objekte gerendert werden und Sie Blockly keine neuen gerenderten Objekte hinzufügen können. Die einzigen gerenderten Objekte, die in einem Arbeitsbereich vorhanden sein können, sind Blöcke, Sprechblasen und Arbeitsbereichskommentare.
„Copyable“ implementieren
Wenn Sie ein kopierbares Objekt erstellen möchten, müssen Sie die Schnittstellen ICopyable, IDraggable und IDeletable implementieren. Die beiden letztgenannten Schnittstellen sind erforderlich, damit ein eingefügtes Objekt bearbeitet und gelöscht werden kann.
Auswählbar
Die ICopyable-Schnittstelle erweitert die ISelectable-Schnittstelle. Das bedeutet, dass Sie auch diese Methoden und Eigenschaften implementieren müssen.
Die Auswahl ist erforderlich, da Tastenkombinationen das ausgewählte Objekt berücksichtigen, um zu ermitteln, was kopiert werden soll.
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.
}
}
Kopierbar
Die ICopyable-Schnittstelle selbst hat nur eine erforderliche Methode, toCopyData, die eine JSON-serialisierbare Darstellung des Status des kopierbaren Objekts zurückgibt, mit der das kopierbare Objekt neu erstellt werden kann.
Die Kopierdaten müssen auch eine paster-Property enthalten, die den registrierten String-Namen des Nutzers enthält, der diese Kopierdaten einfügen soll. Weitere Informationen zu Pastes finden Sie unter Paster implementieren.
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 hat auch eine optionale Methode, isCopyable, die zurückgibt, ob ein Objekt derzeit kopierbar ist.
Verschiebbar und löschbar
Informationen zum Implementieren von IDraggable und IDeletable finden Sie unter Benutzerdefinierte Drag-Objekte.
Paster implementieren
Zum Erstellen eines Paster müssen Sie die IPaster-Schnittstelle implementieren. Sie hat nur eine Methode paste, die die Kopierdaten des einzufügenden Elements, den Arbeitsbereich, in den das Element eingefügt werden soll, und eine optionale Koordinate als Einfügeort entgegennimmt.
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.
}
}
Anmeldung
Nachdem Sie einen Paster implementiert haben, müssen Sie ihn registrieren, damit Sie den Paster, der mit bestimmten Kopierdaten verknüpft ist, über seine paster-Property finden können.
// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());