Fixed build and MenuItem vs CommandMenuItem class names collision

Author: andersnm

src/components/MixerCanvas.ts

@@ -3,7 +3,7 @@ import { FlexCanvas } from "./FlexCanvas";
 import { Appl } from "../App";
 import { ConnectionDocument, InstrumentDocument } from "../audio/SongDocument";
 import { PinsPanel } from "./PinsPanel";
-import { MenuItem } from "../menu/menu";
+import { CommandMenuItem } from "../menu/menu";
 import { getNoteForKey } from "./PatternEditorHelper";
 import { noteKeyDown, noteKeyStopAll, noteKeyUp } from "../KeyboardNoteHelper";
 
@@ -21,7 +21,7 @@ const connectionGainHeight = 150;
 const connectionGainWidth = 32;
 const connectionGainHandleHeight = 24;
 
-const instrumentMenu: MenuItem[] = [
+const instrumentMenu: CommandMenuItem[] = [
     {
         label: "Toggle Mute",
         action: "mute",
@@ -286,7 +286,7 @@ export class MixerCanvas implements IComponent {
 
             // click mixer bg -> create insturment
             // create menu with instrument factory parameter
-            const mixerMenu: MenuItem[] = [ {
+            const mixerMenu: CommandMenuItem[] = [ {
                 label: "Create Instrument...",
                 items: []
             },
@@ -309,8 +309,11 @@ export class MixerCanvas implements IComponent {
             e.preventDefault();
 
             const action = await this.app.contextMenuContainer.showPopup(rc.left + e.offsetX, rc.top + e.offsetY, mixerMenu);
-            await this.app.createInstrument(action, this.clickPt[0], this.clickPt[1]);
+            if (!action || typeof action === "function") {
+                return;
+            }
 
+            await this.app.createInstrument(action, this.clickPt[0], this.clickPt[1]);
             return;
         }
 

src/components/PresetDropdown.ts

@@ -1,7 +1,6 @@
 import { Appl } from "../App";
 import { Preset } from "../audio/SongDocument";
-import { MenuItem } from "../menu/menu";
-import { Button, ICommandHost, IComponent } from "../nutz";
+import { Button, IComponent } from "../nutz";
 
 export class PresetDropdown implements IComponent {
     app: Appl;

src/components/WavePanel.ts

@@ -5,7 +5,7 @@ import { ButtonToolbar, ICommandHost, StatusBar } from "../nutz";
 import { InstrumentDocument, WaveDocument } from "../audio/SongDocument";
 import { ViewFrame } from "../nutz/ViewFrame";
 import { formatNote } from "./PatternEditorHelper";
-import { MenuItem as NutzMenuItem } from "../nutz";
+import { MenuItem } from "../nutz";
 import { showCreateNewWaveDialog } from "../dialogs/CreateNewWaveDialog";
 
 export class WavePanel extends ViewFrame {
@@ -115,10 +115,10 @@ export class WavePanel extends ViewFrame {
 
     onStatusBarInstrumentContextMenu = async (ev: MouseEvent) => {
         const instruments = this.getWaveTableInstruments();
-        const menuItems: NutzMenuItem[] = [];
+        const menuItems: MenuItem[] = [];
         for (let instrument of instruments) {
 
-            const waveItems: NutzMenuItem[] = [
+            const waveItems: MenuItem[] = [
                 {
                     label: "Create new...",
                     action: () => this.statusCreateNewAndGotoWave(instrument),
@@ -142,7 +142,7 @@ export class WavePanel extends ViewFrame {
 
         const rc = (ev.target as HTMLElement).getBoundingClientRect();
         const action = await this.app.contextMenuContainer.showPopup(rc.left + ev.offsetX, rc.top + ev.offsetY, menuItems);
-        if (!action) {
+        if (!action || typeof action !== "function") {
             return false;
         }
 

src/menu/menu.ts

@@ -7,14 +7,14 @@
     copy: "hgi-copy-01",
     paste: "hgi-column-insert",
 */
-export interface MenuItem {
+export interface CommandMenuItem {
     label: string;
     action?: string;
     checked?: boolean;
-    items?: MenuItem[];
+    items?: CommandMenuItem[];
 }
 
-export const fileMenu: MenuItem[] = [
+export const fileMenu: CommandMenuItem[] = [
     {
         label: "New...",
         action: "clear-song"
@@ -29,10 +29,10 @@ export const fileMenu: MenuItem[] = [
     },
 ];
 
-export const waveMenu: MenuItem[] = [
+export const waveMenu: CommandMenuItem[] = [
 ];
 
-export const editMenu: MenuItem[] = [
+export const editMenu: CommandMenuItem[] = [
     {
         label: "Undo",
         action: "YYY"
@@ -96,7 +96,7 @@ export const editMenu: MenuItem[] = [
 // TODO; dfin action lobally, wit labls (translatabl)
 // build mnus wit action rfs only
 
-const sidebarMenu: MenuItem[] = [
+const sidebarMenu: CommandMenuItem[] = [
     {
         label: "Waves",
         action: "show-waves"
@@ -111,7 +111,7 @@ const sidebarMenu: MenuItem[] = [
     },
 ];
 
-export const viewMenu: MenuItem[] = [
+export const viewMenu: CommandMenuItem[] = [
     {
         label: "Sequence",
         action: "show-sequence-editor"
@@ -144,7 +144,7 @@ export const viewMenu: MenuItem[] = [
 
 ];
 
-export const mainMenu: MenuItem[] = [
+export const mainMenu: CommandMenuItem[] = [
     {
         label: "File",
         action: "",
@@ -162,7 +162,7 @@ export const mainMenu: MenuItem[] = [
     },
 ];
 
-export const sequencerMenu: MenuItem[] = [
+export const sequencerMenu: CommandMenuItem[] = [
     {
         label: "Add Column",
         action: "sequence-add-track",
@@ -177,7 +177,7 @@ export const sequencerMenu: MenuItem[] = [
     }
 ];
 
-export const patternMenu: MenuItem[] = [
+export const patternMenu: CommandMenuItem[] = [
     {
         label: "Add Column...",
         action: "add-column"
@@ -192,7 +192,7 @@ export const patternMenu: MenuItem[] = [
     },
 ];
 
-export const patternListMenu: MenuItem[] = [
+export const patternListMenu: CommandMenuItem[] = [
     {
         label: "Edit",
         action: "goto-pattern-editor"
@@ -220,7 +220,7 @@ export const patternListMenu: MenuItem[] = [
     },
 ];
 
-export const waveListMenu: MenuItem[] = [
+export const waveListMenu: CommandMenuItem[] = [
     {
         label: "Edit",
         action: "goto-wave-editor"
@@ -252,7 +252,7 @@ export const waveListMenu: MenuItem[] = [
     },
 ];
 
-export const presetMenu: MenuItem[] = [
+export const presetMenu: CommandMenuItem[] = [
     {
         label: "Load local bank...",
         action: "import-local-bank",
@@ -267,7 +267,7 @@ export const presetMenu: MenuItem[] = [
     },
 ];
 
-export const waveInstrumentMenu: MenuItem[]= [
+export const waveInstrumentMenu: CommandMenuItem[]= [
     {
         label: "New Wave...",
         action: "create-wave",

src/nutz/ContextMenuContainer.ts

@@ -1,7 +1,6 @@
-import { MenuItem } from "../menu/menu";
+import { CommandMenuItem } from "../menu/menu";
 import { ICommandHost } from "./CommandHost";
-import { IComponent } from "./IComponent";
-import { Menu, MenuItem as NutzMenuItem } from "./Menu";
+import { Menu, MenuItem } from "./Menu";
 import { convertNutzMenu } from "./Menubar";
 
 export class ContextMenuContainer {
@@ -17,21 +16,21 @@ export class ContextMenuContainer {
         this.menu.addEventListener("keydown", this.onMenuKeyDown);
     }
 
-    async show(app: ICommandHost, x: number, y: number, menu: MenuItem[]) {
+    async show(app: ICommandHost, x: number, y: number, menu: CommandMenuItem[]) {
         const nutzMenu = convertNutzMenu(app, menu)
 
         this.commandHost = app;
 
         const action = await this.showPopup(x, y, nutzMenu);
-        if (!action) {
+        if (!action || typeof action === "function") {
             return null;
         }
 
         return await app.executeCommand(action);
     }
 
     // Returns the action property of the selected menu item, or null if canceled
-    async showPopup(x: number, y: number, menu: NutzMenuItem[]): Promise<string | null> {
+    async showPopup(x: number, y: number, menu: MenuItem[]): Promise<string | (() => void) | null> {
 
         if (this.resolve) {
             this.resolve(null);

src/nutz/Menu.ts

@@ -1,6 +1,6 @@
 export interface MenuItem {
     label: string;
-    action?: any;
+    action?: string | (() => void);
     icon?: string;
     shortcut?: string; //
     checked?: boolean;

src/nutz/Menubar.ts

@@ -1,11 +1,11 @@
-import { MenuItem } from "../menu/menu";
-import { MenuItem as NutzMenuItem } from "./Menu";
+import { CommandMenuItem } from "../menu/menu";
+import { MenuItem } from "./Menu";
 import { ICommandHost } from "./CommandHost";
 import { IComponent } from "./IComponent";
 import { Menu } from "./Menu";
 
-export function convertNutzMenu(app: ICommandHost, menu: MenuItem[]): NutzMenuItem[] {
-    const nutzMenu: NutzMenuItem[] = menu.map(m => ({
+export function convertNutzMenu(app: ICommandHost, menu: CommandMenuItem[]): MenuItem[] {
+    const nutzMenu: MenuItem[] = menu.map(m => ({
         label: m.label,
         action: m.action,
         icon: app.getCommand(m.action)?.icon,
@@ -24,7 +24,7 @@ export class MenuBar implements IComponent {
     selectedIndex: number = -1;
     open: boolean = false;
     hovering: boolean = false;
-    menuItems: MenuItem[] = null;
+    menuItems: CommandMenuItem[] = null;
 
     constructor(app: ICommandHost) {
         this.app = app;
@@ -99,7 +99,7 @@ export class MenuBar implements IComponent {
         itemNode.className = "px-1 rounded " + (hover ? "bg-neutral-700 text-neutral-100" : "bg-neutral-800 text-neutral-300"); // hover:bg-neutral-700 hover:text-neutral-100";
     }
 
-    bindMenubarMenu(menu: MenuItem[]) {
+    bindMenubarMenu(menu: CommandMenuItem[]) {
 
         this.menuItems = menu;
         while (this.menuContainer.childNodes.length > 0) this.menuContainer.removeChild(this.menuContainer.lastChild);
@@ -168,7 +168,7 @@ export class MenuBar implements IComponent {
         }
     }
 
-    showMenu(x: number, y: number, menu: MenuItem[]) {
+    showMenu(x: number, y: number, menu: CommandMenuItem[]) {
         // translate to menu component's menuitem with shortcut, icon etc from the command
         const nutzMenu = convertNutzMenu(this.app, menu)
         this.menu.bindMenu(nutzMenu);