Sistem salin tempel dibuat dari tiga hal, objek ICopyable
, ICopyData
yang mewakili objek yang disalin, dan
objek IPaster
yang dapat mengubah kembali data yang disalin menjadi objek
yang dapat disalin. Setiap jenis ICopyable
memerlukan IPaster
terkait yang dapat menempelkan
data tersebut.
Sistem ini ditampilkan kepada pengguna melalui opsi menu konteks dan pintasan keyboard.
Ada sangat sedikit situasi ketika Anda ingin mengimplementasikan copyable kustom atau paster kustom (misalnya, plugin multiselect, atau plugin salin tempel lintas tab), karena biasanya objek yang dapat disalin akan dirender, dan Anda tidak dapat menambahkan objek baru yang dirender ke Blockly. Satu-satunya objek yang dirender yang ada di dalam ruang kerja adalah blok, balon, dan komentar ruang kerja.
Mengimplementasikan salinan
Untuk membuat objek yang dapat disalin, Anda perlu mengimplementasikan antarmuka ICopyable
.
Dapat dipilih
Antarmuka ICopyable
memperluas antarmuka ISelectable
,
yang berarti Anda juga perlu mengimplementasikan metode dan properti tersebut.
Dapat dipilih diperlukan karena pintasan keyboard melihat objek yang dipilih untuk mengetahui apa yang akan disalin.
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.
}
}
Dapat disalin
Antarmuka ICopyable
sendiri hanya memiliki satu metode, toCopyData
, yang
menampilkan representasi yang dapat diserialisasi JSON dari status objek yang dapat disalin, yang
dapat digunakan untuk membuat ulang objek yang dapat disalin.
Data salinan juga harus menyertakan properti paster
, yang menyimpan nama string terdaftar
yang terkait dengan paster yang harus menempelkan data salinan ini. Untuk
mengetahui informasi selengkapnya tentang paster, lihat Mengimplementasikan 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,
};
}
}
Mengimplementasikan paster
Untuk membuat paster, Anda perlu mengimplementasikan antarmuka IPaster
. Fungsi ini hanya memiliki
satu metode paste
yang mengambil salinan data dari hal yang ditempelnya, ruang kerja untuk menempelkan sesuatu, dan koordinat opsional, yang merupakan
lokasi untuk menempelkan objek tersebut.
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.
}
}
Pendaftaran
Setelah mengimplementasikan paster, Anda harus mendaftarkannya agar dapat
menemukan paster yang terkait dengan data salinan tertentu dari properti paster
.
// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());