Menús contextuales

Cuando un usuario hace clic con el botón derecho (o mantiene presionados) en un bloque o lugar de trabajo, se muestra un menú contextual con acciones adicionales. Puedes configurar este menú contextual para mostrar opciones adicionales o quitar las predeterminadas. En esta guía, se explica cómo agregar una opción personalizada a todos los bloques o lugares de trabajo. Si deseas cambiar el menú contextual para un solo tipo de bloque, consulta la información en la página de bloques personalizados.

API de Context Menu

La clase ContextMenuRegistry contiene métodos para registrar, cancelar el registro y obtener todas las opciones del menú contextual. La clase es un singleton, por lo que los métodos se deben llamar en el objeto Blockly.ContextMenuRegistry.registry en lugar de crear una instancia de una nueva instancia tú mismo. La clase ContextMenu llama al método getContextMenuItems cada vez que debe mostrarse un menú contextual. Si el bloque o el lugar de trabajo tienen una función customContextMenu, se llamará a continuación para modificar la lista de opciones.

Cómo agregar opciones personalizadas

Cada opción del menú del registro tiene varias propiedades:

  • callback: Es una función a la que se llama cuando se hace clic en la opción de menú.
  • scopeType: Es Blockly.ContextMenuRegistry.ScopeType.BLOCK o Blockly.ContextMenuRegistry.ScopeType.WORKSPACE para indicar dónde debería mostrarse esta opción. Si se debe mostrar una opción para los lugares de trabajo y los bloques, debe registrarse una vez para cada scopeType.
  • displayText: Es una cadena, HTML o una función que muestra una de las opciones anteriores. Determina el texto que se muestra en el menú.
  • preconditionFn: Es una función que muestra enabled, disabled o hidden para determinar si se debe renderizar la opción de menú y cómo se debe renderizar.
  • weight: Es un número que determina el orden de clasificación de la opción. Las opciones con pesos más altos aparecerán más adelante en el menú contextual.
  • id: Es un ID de cadena único para la opción.

Se llamará a cada una de las funciones callback, displayText (si es una función) y preconditionFn con un objeto Scope que contiene información sobre el lugar de trabajo o el bloque exactos en los que se hace clic. De esta manera, la opción de tu menú contextual puede hacer referencia a propiedades sobre el lugar de trabajo o el bloque. Por ejemplo, la opción de menú contextual que permite al usuario borrar todos los bloques dice "Borrar 42 bloques" si el lugar de trabajo contiene 42 bloques. Con preconditionFn, una opción de menú puede ser enabled si alguna propiedad del bloque es verdadera, o bien disabled de lo contrario.

Para obtener más ejemplos, puedes ver el registro de las opciones predeterminadas del menú contextual en contextmenu_items.js.

Cambiar o quitar opciones predeterminadas

Puedes cancelar el registro de cualquier opción con Blockly.ContextMenuRegistry.registry.unregister(id). Los ID para las opciones predeterminadas se encuentran en contextmenu_items.js.

Para cambiar una opción predeterminada, llama a getItem con el ID y cámbialo según sea necesario.