Kontextmenüs

Ein Kontextmenü enthält eine Liste von Aktionen, die Sie für ein Element im Arbeitsbereich ausführen können. Bei Rechtsklicks und langem Drücken wird ein Kontextmenü angezeigt.

Sie können eine benutzerdefinierte Kontextmenüoption erstellen, wenn Sie eine neue Art von Aktion hinzufügen möchten, die der Nutzer ausführen kann. z. B. Organisieren aller Blöcke im Arbeitsbereich oder Herunterladen eines Bildes der Blöcke. Wenn Sie glauben, dass die Aktion nur selten verwendet wird, ist das Kontextmenü der ideale Ort, um sie zu platzieren. Andernfalls sollten Sie eine besser auffindbare Möglichkeit für den Zugriff auf die Aktion schaffen.

Hinweis :Im Codelab für das Kontextmenü finden Sie Beispiele zum Hinzufügen von Kontextmenüoptionen.

Neue Option implementieren

Zum Implementieren einer neuen Kontextmenüoption müssen Sie die Schnittstelle RegistryItem ausführen.

ID

Das Attribut id sollte ein eindeutiger String sein, der angibt, welche Funktion die Kontextmenüoption hat.

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

Bereich

Das Attribut scopeType teilt Blockly mit, in welchem Kontext die Menüoption angezeigt werden kann und welche Informationen an displayText, preconditionFn und callback übergeben werden sollen. Kontextmenüs können auf Blöcke, Arbeitsbereichskommentare und Arbeitsbereiche beschränkt werden.

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

Wenn das Kontextmenü in mehreren Bereichen funktionieren soll, sollten Sie die Kontextmenüoption duplizieren und den Umfangsparameter für jeden Bereich neu definieren.

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

Anzeigetext

Die displayText ist das, was dem Nutzer als Teil der Menüoption angezeigt werden soll. Der Anzeigetext kann ein String, HTML oder eine Funktion sein, die entweder einen String oder HTML zurückgibt.

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

Wenn Sie eine Übersetzung aus Blockly.Msg anzeigen lassen möchten, müssen Sie eine Funktion verwenden. Wenn Sie versuchen, den Wert direkt zuzuweisen, werden die Nachrichten möglicherweise nicht geladen und Sie erhalten stattdessen den Wert undefined.

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

Wenn Sie eine Funktion verwenden, wird auch ein Scope-Wert übergeben, mit dem Sie Zugriff auf das Element erhalten, mit dem das Kontextmenü verknüpft ist, z.B. den Block oder den Arbeitsbereich. Damit können Sie dem Anzeigetext Informationen über das Element hinzufügen.

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

Gewicht

weight bestimmt die Reihenfolge, in der Kontextmenüelemente angezeigt werden. Mehr positive Werte werden in der Liste weiter unten angezeigt als weniger positive Werte. (Sie können sich vorstellen, dass Optionen mit einer höheren Gewichtung „schwerer“ sind und daher auf den unteren Rand verschwinden.)

const deleteOption = {
  weight: 10;
}

Die Gewichtungen für die Optionen des integrierten Kontextmenüs werden in aufsteigender Reihenfolge angegeben, beginnend bei 1 und werden um 1 erhöht.

Voraussetzung

Zusätzlich zum scopeType können Sie mit preconditionFn einschränken, wann und wie eine Kontextmenüoption angezeigt wird.

Sie sollte einen String aus einem Satz von Strings zurückgeben: 'enabled', 'disabled' oder 'hidden'.

Wert	Beschreibung	Bild
aktiviert	Zeigt an, dass die Option aktiv ist.
deaktiviert	Zeigt an, dass die Option nicht aktiv ist.
ausgeblendet	Blendet die Option aus.

An das preconditionFn wird auch ein Scope übergeben, mit dem Sie den Status Ihrer Option ermitteln können.

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

Rückruf

Das Attribut callback führt die Aktion Ihres Kontextmenüeintrags aus. Dabei werden ein Scope und ein PointerEvent übergeben. Das PointerEvent ist das ursprüngliche Ereignis, das das Öffnen des Kontextmenüs ausgelöst hat, nicht das Ereignis, bei dem eine Option ausgewählt wurde. Anhand des Ereignisses können Sie herausfinden, wo der Klick erfolgte. So können Sie beispielsweise einen neuen Block an der Klickposition erstellen.

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

Anmeldung

Sie müssen die Kontextmenüoption registrieren, um sie zu verwenden. Sie sollten dies einmal beim Seitenaufbau tun. Dies kann vor oder nach dem Injizieren des Arbeitsbereichs passieren.

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

Optionen für jeden Blockierungstyp ändern

Für Blöcke gibt es eine zusätzliche Möglichkeit zum Ändern von Kontextmenüs: Sie überschreiben die Eigenschaft customContextMenu. Bei dieser Methode wird ein Array von ContextMenuOption-Objekten (die aus den registrierten Menüelementen sortiert werden) übernommen und dieses Array dann direkt geändert, um den endgültigen Satz angezeigter Optionen zu bestimmen.

Weitere Informationen finden Sie unter Blöcke definieren, benutzerdefinierte Kontextmenüs.

Für Arbeitsbereiche gibt es auch die Methode configureContextMenu, die ähnlich funktioniert.

Option entfernen

Sie können eine Option aus dem Kontextmenü entfernen, indem Sie die Registrierung nach ID aufheben.

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

Die IDs für die Standardoptionen finden Sie in contextmenu_items.ts.

Option ändern

Sie können eine vorhandene Option ändern, indem Sie das Element aus der Registry abrufen und dann direkt bearbeiten.

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