Skip to Content
StudioExtensionsEntwicklungTutorial: Menüs erweitern

Tutorial: Menüs erweitern

In diesem Tutorial lernen Sie, wie Extensions bestehende Menüs erweitern und eigene Menüs erstellen.

Was Sie lernen

  • Bestehende Menüs mit registerMenuModifier erweitern
  • Eigene Menüs mit registerMenu erstellen
  • Menü-Einträge positionieren (append, prepend, insertAfter, insertBefore)
  • Verschiedene MenuItem-Typen verwenden

Menü-Modifier: Bestehende Menüs erweitern

Der häufigste Anwendungsfall ist das Erweitern eines vorhandenen Menüs. Dafür nutzen Sie registerMenuModifier:

import { Studio, MenuItem } from '@5minds/processcube_studio_sdk';
 
export function onLoad(studio: Studio): void {
  // Command registrieren
  studio.commands.register('meineExt.aktion', () => {
    studio.notifications.open('Aktion ausgeführt!');
  });
 
  // Settings-Menü erweitern
  studio.menus.registerMenuModifier('std/activity-bar/settings', (menu, studio) => {
    const neueEintraege: MenuItem[] = [
      { type: 'divider' },
      {
        type: 'command',
        id: 'meine-ext/aktion',
        label: 'Meine Aktion',
        command: 'meineExt.aktion',
        icon: 'fad fa-star',
      },
    ];
 
    return studio.menus.appendToMenu(menu, neueEintraege);
  });
}

Positionierung von Einträgen

Sie können Einträge an verschiedenen Stellen im Menü platzieren:

// Am Ende anfügen
studio.menus.appendToMenu(menu, items);
 
// Am Anfang einfügen
studio.menus.prependToMenu(menu, items);
 
// Nach einem bestimmten Eintrag
studio.menus.insertAfterMenuItem(menu, 'vorhandene-id', items);
 
// Vor einem bestimmten Eintrag
studio.menus.insertBeforeMenuItem(menu, 'vorhandene-id', items);

Eigene Menüs erstellen

Erstellen Sie ein vollständig neues Menü, das z.B. als Kontextmenü verwendet werden kann:

export function onLoad(studio: Studio): void {
  // Commands registrieren
  studio.commands.register('meineExt.exportPdf', () => { /* ... */ });
  studio.commands.register('meineExt.exportPng', () => { /* ... */ });
  studio.commands.register('meineExt.exportSvg', () => { /* ... */ });
 
  // Eigenes Menü registrieren
  studio.menus.registerMenu('meineExt/export-menu', () => {
    return [
      {
        type: 'command',
        id: 'meineExt/export-pdf',
        label: 'Als PDF exportieren',
        command: 'meineExt.exportPdf',
        icon: 'fad fa-file-pdf',
      },
      {
        type: 'command',
        id: 'meineExt/export-png',
        label: 'Als PNG exportieren',
        command: 'meineExt.exportPng',
        icon: 'fad fa-file-image',
      },
      { type: 'divider' },
      {
        type: 'command',
        id: 'meineExt/export-svg',
        label: 'Als SVG exportieren',
        command: 'meineExt.exportSvg',
        icon: 'fad fa-file-code',
      },
    ];
  });
}

Es gibt drei Typen von Menü-Einträgen:

Command-Eintrag

Führt einen registrierten Command aus:

{
  type: 'command',
  id: 'eindeutige-id',
  label: 'Angezeigter Text',
  command: 'command.id',
  commandArgs: ['optional', 'args'],   // Optional: Argumente
  icon: 'fad fa-icon',                 // Optional: FontAwesome-Icon
  shortcut: 'Cmd+Shift+E',            // Optional: Angezeigter Shortcut
}

Separator

Visuelle Trennung zwischen Einträgen:

{
  type: 'divider',
}

Submenü

Verschachteltes Menü:

{
  type: 'submenu',
  id: 'mein-submenu',
  label: 'Weitere Optionen',
  icon: 'fad fa-ellipsis-h',
  children: [
    { type: 'command', id: 'opt-1', label: 'Option 1', command: 'cmd1' },
    { type: 'command', id: 'opt-2', label: 'Option 2', command: 'cmd2' },
  ],
}

Dynamische Menüs

Menü-Factories können dynamische Einträge basierend auf dem aktuellen Zustand erzeugen:

studio.menus.registerMenu('meineExt/dynamic-menu', () => {
  const items: MenuItem[] = [];
 
  // Einträge basierend auf geöffneten Dokumenten
  const openDocs = studio.editors.getOpenEditorDocuments();
  for (const doc of openDocs) {
    items.push({
      type: 'command',
      id: `meineExt/switch-to-${doc.uri}`,
      label: doc.label || doc.uri,
      command: 'meineExt.switchToDoc',
      commandArgs: [doc],
    });
  }
 
  return items;
});

Kontextmenü-Ablauf

Nächste Schritte

Tutorial: Hello WorldEngine