Kontextmenüs

Wenn ein Nutzer mit der rechten Maustaste auf einen Block oder Arbeitsbereich klickt oder lange drückt, wird ein Kontextmenü mit zusätzlichen Aktionen angezeigt. Sie können dieses Kontextmenü so konfigurieren, dass zusätzliche Optionen angezeigt oder die Standardoptionen entfernt werden. In dieser Anleitung erfahren Sie, wie Sie allen Blöcken oder Arbeitsbereichen eine benutzerdefinierte Option hinzufügen. Wenn Sie das Kontextmenü für nur einen Blocktyp ändern möchten, lesen Sie die Informationen auf der Seite mit benutzerdefinierten Blöcken.

Kontextmenü-API

Die ContextMenuRegistry-Klasse enthält Methoden zum Registrieren, Aufheben der Registrierung und zum Abrufen aller Kontextmenüoptionen. Die Klasse ist ein Singleton-Objekt. Daher sollten Methoden für das Blockly.ContextMenuRegistry.registry-Objekt aufgerufen werden, anstatt selbst eine neue Instanz zu instanziieren. Die Klasse ContextMenu ruft die Methode getContextMenuItems immer dann auf, wenn ein Kontextmenü angezeigt werden soll. Wenn der Block oder Arbeitsbereich eine customContextMenu-Funktion hat, wird sie danach aufgerufen, um die Liste der Optionen zu ändern.

Benutzerdefinierte Optionen hinzufügen

Jede Menüoption in der Registry hat mehrere Eigenschaften:

  • callback: Eine Funktion, die beim Klicken auf die Menüoption aufgerufen wird.
  • scopeType: Entweder Blockly.ContextMenuRegistry.ScopeType.BLOCK oder Blockly.ContextMenuRegistry.ScopeType.WORKSPACE, für die diese Option angezeigt werden soll. Wenn eine Option sowohl für Arbeitsbereiche als auch für Blöcke angezeigt werden soll, muss sie für jeden Bereichstyp einmal registriert werden.
  • displayText: Entweder ein String, HTML oder eine Funktion, die einen der beiden Werte zurückgibt. Bestimmt den im Menü angezeigten Text.
  • preconditionFn: Funktion, die entweder enabled, disabled oder hidden zurückgibt, um zu bestimmen, ob und wie die Menüoption gerendert werden soll.
  • weight: Eine Zahl, die die Sortierreihenfolge der Option bestimmt. Optionen mit einer höheren Gewichtung werden später im Kontextmenü angezeigt.
  • id: Eine eindeutige String-ID für die Option.

Alle Funktionen callback, displayText (falls eine Funktion) und preconditionFn werden mit einem Scope-Objekt aufgerufen, das Informationen zum genauen Arbeitsbereich oder Block enthält, auf den geklickt wird. So kann die Kontextmenüoption auf Eigenschaften zum Arbeitsbereich oder Block verweisen. So lautet beispielsweise die Option „42 Blöcke löschen“ im Kontextmenü, die es einem Nutzer ermöglicht, alle Blöcke zu löschen, wenn der Arbeitsbereich 42 Blöcke enthält. Mit dem preconditionFn kann eine Menüoption enabled sein, wenn ein Attribut des Blocks wahr ist, oder disabled.

Weitere Beispiele finden Sie in contextmenu_items.js, um die Registrierung der Standardkontextmenüoptionen zu sehen.

Standardoptionen ändern oder entfernen

Sie können die Registrierung jeder Option mit Blockly.ContextMenuRegistry.registry.unregister(id) aufheben. Die IDs für die Standardoptionen befinden sich in contextmenu_items.js.

Um eine Standardoption zu ändern, rufen Sie getItem mit der ID auf und ändern Sie sie nach Bedarf.