Salin dan tempel

Blockly mendukung operasi salin, potong, dan tempel untuk sejumlah komponen bawaannya, seperti blok, komentar ruang kerja, dan balon.

Perilaku papan klip default

Inti Blockly dilengkapi dengan pintasan keyboard yang dapat memotong, menyalin, atau menempelkan blok, komentar ruang kerja, dan komponen lain yang menerapkan antarmuka ICopyable. Fitur ini juga dilengkapi dengan opsi menu konteks untuk menduplikasi blok. Anda dapat mengubah atau menghapus pintasan dan item menu default tersebut sesuai kebutuhan.

Dalam penerapan papan klip default, objek yang dapat disalin hanya dapat ditempelkan ke ruang kerja tempat objek tersebut disalin, atau ke ruang kerja target jika objek tersebut disalin dari menu flyout. Artinya, Anda dapat menyalin blok dari menu flyout ke ruang kerja target menu flyout tersebut, tetapi Anda tidak dapat menyalin blok dari satu ruang kerja utama ke ruang kerja utama lainnya.

Menyalin dan menempelkan di seluruh ruang kerja dan tab

Jika ingin mengizinkan pengguna menyalin blok dari satu ruang kerja dan menempelkannya ke ruang kerja lain, atau bahkan ke ruang kerja di salinan aplikasi yang berjalan di tab lain, Anda dapat menginstal plugin @blockly/plugin-cross-tab-copy-paste.

Perilaku papan klip kustom

Jika menginginkan perilaku yang berbeda, Anda dapat menerapkan papan klip kustom dengan meng-uninstal pintasan keyboard yang disertakan dengan Blockly dan menginstal pintasan lain yang berfungsi secara berbeda. Untuk memfasilitasi hal ini, Anda dapat menggunakan metode di namespace Blockly.clipboard untuk menyalin, menempel, atau kontrol yang lebih terperinci seperti menyetel ruang kerja tempat objek disalin.

Objek kustom yang dapat disalin

Item arbitrer dapat dibuat kompatibel dengan sistem salin/tempel menggunakan tiga antarmuka: ICopyable untuk merepresentasikan objek yang dapat disalin, ICopyData untuk merepresentasikan objek yang disalin, dan IPaster untuk merepresentasikan objek yang dapat mengubah data salinan kembali menjadi objek yang dapat disalin. Setiap jenis ICopyable memerlukan IPaster terkait yang dapat menempelkan data tersebut.

Objek ICopyable apa pun yang memiliki IPaster dan ICopyData yang sesuai akan otomatis berfungsi dengan sistem papan klip default.

Hanya ada sedikit situasi di mana Anda ingin menerapkan penyalinan yang dapat disesuaikan atau penempelan yang dapat disesuaikan (misalnya, plugin multiselect), karena objek yang dapat disalin dirender, dan Anda tidak dapat menambahkan objek yang dirender baru ke Blockly. Satu-satunya objek yang dirender yang dapat ada dalam ruang kerja adalah blok, balon, dan komentar ruang kerja.

Menerapkan salinan

Untuk membuat objek yang dapat disalin, Anda harus 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 itu 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 Menerapkan 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 harus mengimplementasikan antarmuka IPaster. Hanya memiliki satu metode paste yang mengambil data salinan item yang ditempel, ruang kerja untuk menempelkan item, dan koordinat opsional, yang merupakan lokasi untuk menempelkan item.

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 menerapkan paster, Anda harus mendaftarkannya agar dapat menemukan paster yang terkait dengan salinan data tertentu dari properti paster-nya.

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