Menu konteks

Menu konteks berisi daftar tindakan yang dapat Anda lakukan terkait beberapa elemen di ruang kerja. Menu konteks ditampilkan pada klik kanan dan tekan lama.

Sebaiknya buat opsi menu konteks kustom jika ingin menambahkan jenis tindakan baru yang dapat dilakukan pengguna. Misalnya, mengatur semua blok di ruang kerja atau mendownload gambar blok. Jika Anda merasa tindakan tersebut akan jarang digunakan, menu konteks adalah tempat yang tepat untuk menempatkannya. Jika tidak, Anda mungkin perlu membuat cara yang lebih mudah ditemukan untuk mengakses tindakan.

Menerapkan opsi baru

Untuk mengimplementasikan opsi menu konteks baru, Anda harus memenuhi antarmuka RegistryItem.

ID

Properti id harus berupa string unik yang menunjukkan fungsi opsi menu konteks Anda.

const deleteOption = {
  id: 'deleteElement',
};

Cakupan

Properti scopeType memberi tahu Blockly konteks yang akan menampilkan opsi menu dan informasi yang akan diteruskan ke displayText, preconditionFn, dan callback. Menu konteks dapat mencakup blok, komentar ruang kerja, dan ruang kerja.

const deleteOption = {
  scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};

Jika ingin menu konteks Anda berfungsi dalam beberapa cakupan, Anda harus menduplikasi opsi menu konteks dan menentukan ulang parameter cakupan untuk setiap cakupan.

const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;

Teks tampilan

displayText adalah elemen yang harus ditampilkan kepada pengguna sebagai bagian dari opsi menu. Teks tampilan dapat berupa string, atau HTML, atau fungsi yang menampilkan string atau HTML.

const deleteOption = {
  displayText: 'Delete block',
};

Jika ingin menampilkan terjemahan dari Blockly.Msg, Anda perlu menggunakan fungsi. Jika Anda mencoba menetapkan nilai secara langsung, pesan mungkin tidak dimuat dan Anda akan mendapatkan nilai undefined.

const deleteOption = {
  displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};

Jika Anda menggunakan suatu fungsi, nilai Scope juga akan diteruskan yang memberi Anda akses ke elemen yang terkait dengan menu konteks (mis., blok atau ruang kerja). Anda dapat menggunakannya untuk menambahkan informasi tentang elemen ke teks tampilan.

const deleteOption = {
  displayText: (scope) => `Delete ${scope.block.type} block`,
}

Berat

weight menentukan urutan tampilan item menu konteks. Lebih banyak nilai positif ditampilkan lebih rendah dalam daftar daripada nilai positif yang lebih sedikit. (Anda dapat membayangkan bahwa opsi dengan bobot yang lebih tinggi berukuran "lebih berat" sehingga akan meresap ke bawah.)

const deleteOption = {
  weight: 10;
}

Bobot untuk opsi menu konteks bawaan naik dalam urutan yang meningkat mulai dari 1 dan meningkat 1.

Precondition

Selain scopeType, Anda dapat menggunakan preconditionFn untuk membatasi waktu dan cara opsi menu konteks harus ditampilkan.

Metode ini harus menampilkan salah satu kumpulan string: 'enabled', 'disabled', atau 'hidden'.

Nilai	Deskripsi	Gambar
diaktifkan	Menunjukkan bahwa opsi tersebut aktif.
nonaktif	Menunjukkan bahwa opsi tersebut tidak aktif.
hidden	Menyembunyikan opsi tersebut.

preconditionFn juga meneruskan Scope yang dapat Anda gunakan untuk menentukan status opsi Anda.

const deleteOption = {
  preconditionFn: (scope) => {
    if (scope.block.isDeletable()) {
      return 'enabled';
    }
    return 'disabled';
  }
}

Telepon Balik

Properti callback melakukan tindakan item menu konteks Anda. Scope dan PointerEvent akan diteruskan. PointerEvent adalah peristiwa asli yang memicu pembukaan menu konteks, bukan peristiwa yang memilih opsi. Anda dapat menggunakan peristiwa ini untuk mencari tahu tempat klik terjadi. Hal ini memungkinkan Anda, misalnya, membuat blok baru di lokasi klik.

const deleteOption = {
  callback: (scope, e) => {
    scope.block.dispose();
  }
}

Pendaftaran

Untuk menggunakan opsi menu konteks, Anda harus mendaftarkannya. Anda harus melakukannya sekali saat halaman dimuat. Hal ini bisa terjadi sebelum atau setelah Anda memasukkan ruang kerja.

const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);

Mengubah opsi per jenis blok

Blok memiliki cara tambahan untuk mengubah menu konteks, yaitu dengan menimpa properti customContextMenu-nya. Metode ini mengambil array objek ContextMenuOption (yang disusun dari item menu terdaftar), kemudian memodifikasi array tersebut untuk menentukan kumpulan akhir opsi yang ditampilkan.

Untuk informasi selengkapnya, lihat Menentukan blok, menu konteks kustom.

Ruang kerja juga memiliki metode configureContextMenu yang berfungsi serupa.

Menghapus opsi

Anda dapat menghapus opsi dari menu konteks dengan membatalkan pendaftaran berdasarkan ID.

Blockly.ContextMenuRegistry.registry.unregister('someID');

ID untuk opsi default ada di contextmenu_items.ts.

Mengubah opsi

Anda dapat mengubah opsi yang ada dengan mendapatkan item dari registry, lalu memodifikasinya.

const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';