Add a desktop API to allow for opening custom context menus

Author: pimterry

src/context-menu.ts

@@ -0,0 +1,80 @@
+import * as Electron from 'electron';
+import { UnreachableCheck } from './util';
+
+export interface ContextMenuDefinition {
+    position: { x: number; y: number };
+    items: ContextMenuItem[];
+}
+
+type ContextMenuItem =
+    | ContextMenuOption
+    | ContextMenuSubmenu
+    | { type: 'separator' };
+
+interface ContextMenuOption {
+    type: 'option';
+    id: string;
+    label: string;
+    enabled?: boolean;
+}
+
+interface ContextMenuSubmenu {
+    type: 'submenu';
+    label: string;
+    enabled?: boolean;
+    items: ContextMenuItem[];
+}
+
+type ContextMenuCallback = (item: Electron.MenuItem) => void;
+
+
+//  This resolves either with an id of a selected option, or undefined if the menu is closes any other way.
+export function openContextMenu({ position, items }: ContextMenuDefinition) {
+    return new Promise((resolve) => {
+        const callback = (menuItem: Electron.MenuItem) => resolve(menuItem.id);
+
+        const menu = buildContextMenu(items, callback);
+        menu.addListener('menu-will-close', () => {
+            // Resolve has to be deferred briefly, because the click callback fires *after* menu-will-close.
+            setTimeout(resolve, 0);
+        });
+
+        menu.popup({ x: position.x, y: position.y });
+    });
+}
+
+function buildContextMenu(items: ContextMenuItem[], callback: ContextMenuCallback) {
+    const menu = new Electron.Menu();
+
+    items
+    .map((item) => buildContextMenuItem(item, callback))
+    .forEach(menuItem => menu.append(menuItem));
+
+    return menu;
+}
+
+function buildContextMenuItem(item: ContextMenuItem, callback: ContextMenuCallback): Electron.MenuItem {
+    if (item.type === 'option') return buildContextMenuOption(item, callback);
+    else if (item.type === 'submenu') return buildContextSubmenu(item, callback);
+    else if (item.type === 'separator') return new Electron.MenuItem(item);
+    else throw new UnreachableCheck(item, (i) => i.type);
+}
+
+function buildContextMenuOption(option: ContextMenuOption, callback: ContextMenuCallback) {
+    return new Electron.MenuItem({
+        type: 'normal',
+        id: option.id,
+        label: option.label,
+        enabled: option.enabled,
+        click: callback
+    });
+}
+
+function buildContextSubmenu(option: ContextMenuSubmenu, callback: ContextMenuCallback) {
+    const submenu = buildContextMenu(option.items, callback);
+    return new Electron.MenuItem({
+        label: option.label,
+        enabled: option.enabled,
+        submenu
+    });
+}

src/index.ts

@@ -17,16 +17,14 @@ import * as yargs from 'yargs';
 import * as semver from 'semver';
 import * as rimraf from 'rimraf';
 const rmRF = promisify(rimraf);
+
 import * as windowStateKeeper from 'electron-window-state';
 import { getSystemProxy } from 'os-proxy-config';
-
 import registerContextMenu = require('electron-context-menu');
-registerContextMenu({
-    showSaveImageAs: true
-});
 
-import { getMenu, shouldAutoHideMenu } from './menu';
 import { getDeferred, delay } from './util';
+import { getMenu, shouldAutoHideMenu } from './menu';
+import { ContextMenuDefinition, openContextMenu } from './context-menu';
 import { stopServer } from './stop-server';
 
 const packageJson = require('../package.json');
@@ -588,13 +586,17 @@ if (!amMainInstance) {
     });
 }
 
-ipcMain.handle(
-  'select-application',
-  () =>
-    dialog.showOpenDialogSync({
-      properties:
+ipcMain.handle('select-application', () => {
+    return dialog.showOpenDialogSync({
+        properties:
         process.platform === 'darwin'
-          ? ['openFile', 'openDirectory', 'treatPackageAsDirectory']
-          : ['openFile'],
-    })?.[0]
-);
+            ? ['openFile', 'openDirectory', 'treatPackageAsDirectory']
+            : ['openFile'],
+    })?.[0];
+});
+
+// Enable the default context menu
+registerContextMenu({ showSaveImageAs: true });
+
+// Enable custom context menus, for special cases where the UI wants to define the options available
+ipcMain.handle('open-context-menu', (_event: {}, options: ContextMenuDefinition) => openContextMenu(options));

src/preload.ts

@@ -1,5 +1,11 @@
-import {contextBridge, ipcRenderer} from 'electron';
+import { contextBridge, ipcRenderer } from 'electron';
+
+import type { ContextMenuDefinition } from './context-menu';
 
 contextBridge.exposeInMainWorld('desktopApi', {
-  selectApplication: () => ipcRenderer.invoke('select-application'),
-});
+
+    selectApplication: () => ipcRenderer.invoke('select-application'),
+
+    openContextMenu: (options: ContextMenuDefinition) => ipcRenderer.invoke('open-context-menu', options)
+
+});

src/util.ts

@@ -20,4 +20,14 @@ export function getDeferred<T = void>(): Deferred<T> {
     return { resolve, reject, promise } as any;
 }
 
-export const delay = (delayMs: number) => new Promise<void>((resolve) => setTimeout(resolve, delayMs));
+export const delay = (delayMs: number) => new Promise<void>((resolve) => setTimeout(resolve, delayMs));
+
+export class UnreachableCheck extends Error {
+
+    // getValue is used to allow logging properties (e.g. v.type) on expected-unreachable
+    // values, instead of just logging [object Object].
+    constructor(value: never, getValue: (v: any) => any = (x => x)) {
+        super(`Unhandled case value: ${getValue(value)}`);
+    }
+
+}