Menus contextuels

Un menu contextuel contient une liste d'actions que vous pouvez effectuer concernant certains éléments de l'espace de travail. Un menu contextuel s'affiche lorsque vous effectuez un clic droit et appuyez de manière prolongée.

Vous pouvez créer une option de menu contextuel personnalisée si vous souhaitez ajouter un nouveau type d'action que l'utilisateur peut effectuer. Par exemple, vous pouvez organiser tous les blocs dans l'espace de travail ou télécharger une image des blocs. Si vous pensez que l'action ne sera pas utilisée fréquemment, le menu contextuel est l'endroit idéal pour la saisir. Sinon, vous pouvez créer un moyen plus visible d'accéder à l'action.

Remarque :Consultez l'atelier de programmation de menu contextuel pour obtenir des exemples concrets d'ajout d'options de menu contextuel.

Implémenter une nouvelle option

Pour implémenter une nouvelle option de menu contextuel, vous devez remplir l'interface RegistryItem.

ID

La propriété id doit être une chaîne unique qui indique ce que fait votre option de menu contextuel.

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

Champ d'application

La propriété scopeType indique à Blockly le contexte dans lequel l'option de menu peut s'afficher et les informations à transmettre à ses displayText, preconditionFn et callback. Les menus contextuels peuvent être limités aux blocs, aux commentaires de l'espace de travail et aux espaces de travail.

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

Si vous souhaitez que votre menu contextuel fonctionne dans plusieurs champs d'application, vous devez dupliquer l'option de menu contextuel et redéfinir le paramètre de champ d'application pour chaque champ d'application.

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

Texte à afficher

displayText est ce qui doit être présenté à l'utilisateur dans l'option de menu. Le texte à afficher peut être une chaîne, du code HTML, ou une fonction qui renvoie une chaîne ou du code HTML.

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

Si vous souhaitez afficher une traduction de Blockly.Msg, vous devez utiliser une fonction. Si vous essayez d'attribuer la valeur directement, les messages risquent de ne pas être chargés et vous obtiendrez la valeur undefined à la place.

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

Si vous utilisez une fonction, une valeur Scope lui est également transmise, ce qui vous donne accès à l'élément auquel le menu contextuel est associé (par exemple, le bloc ou l'espace de travail). Vous pouvez l'utiliser pour ajouter des informations sur l'élément à votre texte à afficher.

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

Poids

weight détermine l'ordre d'affichage des éléments du menu contextuel. Plus les valeurs positives sont nombreuses, plus le nombre de valeurs positives est affiché plus bas dans la liste. (Vous pouvez imaginer que les options dont la pondération est plus élevée sont "plus lourdes" et descendent donc vers le bas.)

const deleteOption = {
  weight: 10;
}

Les pondérations des options du menu contextuel intégrées sont classées par ordre croissant à partir de 1, puis en augmentant de 1.

Precondition

En plus de scopeType, vous pouvez utiliser le preconditionFn pour limiter quand et comment une option de menu contextuel doit s'afficher.

Elle doit renvoyer l'une des chaînes suivantes: 'enabled', 'disabled' ou 'hidden'.

Valeur	Description	Images
activé	Indique que l'option est active.
désactivée	Indique que l'option n'est pas active.
(couche	Masque l'option.

preconditionFn reçoit également un Scope que vous pouvez utiliser pour déterminer l'état de votre option.

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

Rappel

La propriété callback effectue l'action de votre élément de menu contextuel. Elle reçoit Scope et PointerEvent. PointerEvent est l'événement d'origine qui a déclenché l'ouverture du menu contextuel, et non celui qui a sélectionné une option. Vous pouvez utiliser l'événement pour déterminer où le clic s'est produit. Cela vous permet, par exemple, de créer un nouveau bloc à l'emplacement du clic.

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

Inscription

Pour utiliser l'option de menu contextuel, vous devez l'enregistrer. Vous devez effectuer cette opération une fois la page chargée. Cela peut se produire avant ou après l'injection de votre espace de travail.

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

Modifier les options par type de bloc

Les blocs disposent d'un autre moyen de modifier les menus contextuels, qui consiste à remplacer leur propriété customContextMenu. Cette méthode utilise un tableau d'objets ContextMenuOption (qui sont compilés à partir des éléments de menu enregistrés), puis modifie ce tableau sur place pour déterminer l'ensemble final d'options affichées.

Pour en savoir plus, consultez la page Définir des blocs et des menus contextuels personnalisés.

Les espaces de travail disposent également d'une méthode configureContextMenu qui fonctionne de la même manière.

Supprimer une option

Vous pouvez supprimer une option du menu contextuel en annulant son enregistrement par ID.

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

Les ID des options par défaut se trouvent dans contextmenu_items.ts.

Modifier une option

Vous pouvez modifier une option existante en récupérant l'élément dans le registre, puis en le modifiant sur place.

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