Salin dan tempel

Sistem salin tempel dibuat dari tiga hal, objek ICopyable, ICopyData yang mewakili objek yang disalin, dan objek IPaster yang dapat mengubah data salinan 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 saat Anda ingin mengimplementasikan paster kustom atau dapat disalin (misalnya, plugin multi-pilihan, 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 dapat berada dalam ruang kerja adalah blok, balon, dan komentar Workspace.

Menerapkan yang dapat disalin

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 JSON-serial yang dapat diserialisasi 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 pemotong yang akan 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 {i>paster<i}

Untuk membuat perekat, Anda perlu mengimplementasikan antarmuka IPaster. Metode ini hanya memiliki satu metode paste yang mengambil data salinan dari item yang ditempelkan, 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 data salinan tertentu dari properti paster-nya.

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