Menu contestuali

Un menu contestuale contiene un elenco di azioni che puoi eseguire in relazione ad alcuni elementi nell'area di lavoro. Viene mostrato un menu contestuale con i clic effettuati con il tasto destro del mouse e le pressioni prolungate.

Puoi creare un'opzione di menu contestuale personalizzata se vuoi aggiungere un nuovo tipo di azione che l'utente può eseguire. Ad esempio, puoi organizzare tutti i blocchi nell'area di lavoro o scaricare un'immagine dei blocchi. Se ritieni che l'azione sarà usata raramente, il menu contestuale è la scelta giusta. In caso contrario, puoi creare un modo più rilevabile per accedere all'azione.

Implementa una nuova opzione

Per implementare una nuova opzione di menu contestuale, devi soddisfare l'interfaccia di RegistryItem.

ID

La proprietà id deve essere una stringa univoca che indica la funzione dell'opzione del menu contestuale.

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

Ambito

La proprietà scopeType indica a Blockly in quale contesto potrebbe essere mostrata l'opzione di menu e quali informazioni trasmettere ai relativi displayText, preconditionFn e callback. I menu contestuali possono limitare l'ambito a blocchi, commenti dell'area di lavoro e aree di lavoro.

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

Se vuoi che il menu contestuale funzioni in più ambiti, devi duplicare l'opzione del menu contestuale e ridefinire il parametro di ambito per ogni ambito.

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

Testo visualizzato

displayText è ciò che deve essere mostrato all'utente nell'ambito dell'opzione del menu. Il testo visualizzato può essere una stringa, un HTML o una funzione che restituisce una stringa o un codice HTML.

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

Se vuoi visualizzare una traduzione da Blockly.Msg devi utilizzare una funzione. Se provi ad assegnare direttamente il valore, i messaggi potrebbero non essere caricati e verrà visualizzato il valore undefined.

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

Se utilizzi una funzione, viene trasmesso anche un valore Scope che ti consente di accedere all'elemento a cui è associato il menu contestuale, ad esempio blocco o area di lavoro. Puoi utilizzarla per aggiungere informazioni sull'elemento al testo visualizzato.

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

Peso

L'weight determina l'ordine in cui vengono visualizzate le voci del menu contestuale. I valori più positivi vengono visualizzati più in basso nell'elenco rispetto a quelli meno positivi. Puoi immaginare che le opzioni con pesi più alti siano "più pesanti" in modo che affondano verso il basso.

const deleteOption = {
  weight: 10;
}

Le ponderazioni per le opzioni del menu contestuale integrate sono in ordine crescente, a partire da 1 e aumentandole di 1.

Precondition

Oltre a scopeType, puoi utilizzare preconditionFn per limitare quando e come deve essere visualizzata un'opzione del menu contestuale.

Dovrebbe essere restituito un insieme di stringhe: 'enabled', 'disabled' o 'hidden'.

Valore	Descrizione	Immagine
abilitata	Indica che l'opzione è attiva.
disabilitato	Indica che l'opzione non è attiva.
nascosto	Nasconde l'opzione.

preconditionFn riceve anche un Scope che puoi utilizzare per determinare lo stato dell'opzione.

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

Richiamata

La proprietà callback esegue l'azione indicata dalla voce del menu contestuale. È stato superato un Scope e un PointerEvent. PointerEvent è l'evento originale che ha attivato l'apertura del menu contestuale, non l'evento che ha selezionato un'opzione. Puoi utilizzare l'evento per capire dove è avvenuto il clic. Ad esempio, puoi creare un nuovo blocco nel punto in cui l'utente fa clic.

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

Iscrizione

Per utilizzare l'opzione del menu contestuale, devi registrarla. Devi eseguire questa operazione al caricamento della pagina. Può accadere prima o dopo l'inserimento nell'area di lavoro.

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

Modifica le opzioni per tipo di blocco

I blocchi offrono un metodo aggiuntivo per modificare i menu contestuali, ovvero sovrascrivere la proprietà customContextMenu corrispondente. Questo metodo prende un array di oggetti ContextMenuOption (combinati dalle voci di menu registrate) e modifica l'array esistente per determinare l'insieme finale di opzioni visualizzate.

Per ulteriori informazioni, consulta Definire blocchi, menu contestuali personalizzati.

Le aree di lavoro hanno anche un metodo configureContextMenu che funziona in modo simile.

Rimuovere un'opzione

Puoi rimuovere un'opzione dal menu contestuale annullando la registrazione in base all'ID.

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

Gli ID delle opzioni predefinite sono in contextmenu_items.ts.

Modificare un'opzione

Puoi modificare un'opzione esistente recuperando l'elemento dal registro e modificandolo nella posizione.

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