Salin dan tempel

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());