Bağlam menüleri

İçerik menüsü, çalışma alanındaki bir öğeyle ilgili olarak yapabileceğiniz işlemlerin listesini içerir. Sağ tıklamalarda ve uzun basıldığında içerik menüsü gösterilir.

Kullanıcının gerçekleştirebileceği yeni bir işlem türü eklemek istiyorsanız, özel bir içerik menüsü seçeneği oluşturmak isteyebilirsiniz. Örneğin, çalışma alanındaki tüm blokları düzenlemek veya blokların resmini indirmek olabilir. İşlemin nadiren kullanılacağını düşünüyorsanız içerik menüsünden bunu yerleştirebilirsiniz. Aksi takdirde, işleme erişmek için daha bulunabilir bir yol oluşturmak isteyebilirsiniz.

Yeni bir seçeneği uygulama

Yeni bir içerik menüsü seçeneği uygulamak için RegistryItem arayüzünü kullanmanız gerekir.

Kimlik

id özelliği, içerik menüsü seçeneğinizin işlevini belirten benzersiz bir dize olmalıdır.

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

Kapsam

scopeType özelliği Blockly'ye menü seçeneğinin hangi bağlamda gösterilebileceğini ve displayText, preconditionFn ve callback öğelerine hangi bilgilerin iletileceğini bildirir. Bağlam menüleri; engellemeler, çalışma alanı yorumları ve çalışma alanlarını kapsayacak şekilde ayarlanabilir.

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

İçerik menünüzün birden fazla kapsamda çalışmasını istiyorsanız içerik menüsü seçeneğini kopyalamanız ve her kapsam için kapsam parametresini yeniden tanımlamanız gerekir.

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

Görünen metin

displayText, kullanıcıya menü seçeneğinin bir parçası olarak gösterilmesi gereken öğedir. Görünen metin bir dize, HTML veya dize veya HTML döndüren bir işlev olabilir.

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

Blockly.Msg dilinden bir çeviriyi görüntülemek isterseniz bir işlev kullanmanız gerekir. Değeri doğrudan atamaya çalışırsanız mesajlar yüklenmeyebilir ve bunun yerine undefined değerini alırsınız.

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

Bir işlev kullanırsanız bu işlev, içerik menüsünün ilişkili olduğu öğeye (ör. blok veya çalışma alanı) erişmenizi sağlayan bir Scope değeri de iletilir. Görüntü metninize öğe hakkında bilgi eklemek için bunu kullanabilirsiniz.

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

Ağırlık

weight, içerik menüsü öğelerinin görüntülenme sırasını belirler. Listede daha pozitif değerler, daha az pozitif değerlerden daha aşağıda gösterilir. (Daha yüksek ağırlığa sahip seçeneklerin "daha ağır" olduğundan en alta düştüğünü düşünebilirsiniz.)

const deleteOption = {
  weight: 10;
}

Yerleşik içerik menüsü seçeneklerinin ağırlıkları, 1'den başlayarak 1'e kadar artacak şekilde sırayla ilerler.

Precondition

scopeType öğesine ek olarak, bir içerik menüsü seçeneğinin ne zaman ve nasıl görüntüleneceğini kısıtlamak için preconditionFn öğesini kullanabilirsiniz.

Dize grubundan birini döndürmelidir: 'enabled', 'disabled' veya 'hidden'.

Değer	Açıklama	Resim
etkin	Seçeneğin etkin olduğunu gösterir.
devre dışı	Seçeneğin etkin olmadığını gösterir.
gizli	Seçeneği gizler.

preconditionFn, seçeneğinizin durumunu belirlemek için kullanabileceğiniz bir Scope de iletilir.

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

Geri Arama

callback özelliği, içerik menüsü öğenizin işlemini gerçekleştirir. Scope ve PointerEvent geçirildi. PointerEvent, içerik menüsünün açılmasını tetikleyen orijinal etkinliktir, bir seçeneği belirleyen etkinlik değildir. Tıklamanın nerede gerçekleştiğini anlamak için etkinliği kullanabilirsiniz. Bu, örneğin, tıklama konumunda yeni bir blok oluşturmanızı sağlar.

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

Kayıt

İçerik menüsü seçeneğinizi kullanmak için, kaydetmeniz gerekir. Bu işlemi sayfa yüklenirken bir kez yapmanız gerekir. Bu, çalışma alanınızı eklemenizden önce veya sonra gerçekleşebilir.

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

Blok türüne göre seçenekleri değiştirme

Engellemelerin, içerik menülerini değiştirmenin ek bir yolu da vardır. Bu yöntem, customContextMenu özelliklerinin üzerine yazmaktır. Bu yöntem ContextMenuOption nesne dizisi alır (kayıtlı menü öğelerinden derlenir) ve daha sonra görüntülenen son seçenek grubunu belirlemek için bu diziyi yerinde değiştirir.

Daha fazla bilgi için Engellemeleri, özel içerik menülerini tanımlama konusuna bakın.

Çalışma alanlarında da benzer şekilde çalışan bir configureContextMenu yöntemi bulunur.

Bir seçeneği kaldırma

Bir seçeneği kimliğe göre kaydını iptal ederek içerik menüsünden kaldırabilirsiniz.

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

Varsayılan seçeneklerin kimlikleri, contextmenu_items.ts içindedir.

Bir seçeneği değiştirme

Mevcut bir seçeneği, öğeyi kayıt defterinden alıp, yerine getirerek değiştirebilirsiniz.

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