Create instruments from mixer contextmenu

Author: andersnm

src/App.ts

@@ -1,4 +1,4 @@
-import { ButtonToolbar, CommandHost, formatHotkey, FullScreen, GridFrameContainer, HFlex, ICommand, IComponent, StatusBar, TabFrameContainer, visitNodeAndChildNodesBreadth, visitNodeAndChildNodesDepth } from "./nutz";
+import { ButtonToolbar, CommandHost, formatHotkey, FullScreen, getOrCreateDirectory, GridFrameContainer, HFlex, ICommand, IComponent, StatusBar, TabFrameContainer, visitNodeAndChildNodesBreadth, visitNodeAndChildNodesDepth } from "./nutz";
 import { MenuBar } from "./nutz/Menubar";
 import { ModalDialogContainer } from "./nutz/ModalDialogContainer";
 import { mainMenu } from './menu/menu';
@@ -25,6 +25,8 @@ import { ChorusFactory } from "./audio/plugins/Chorus";
 import { CompressorFactory } from "./audio/plugins/Compressor";
 import { MasterizerFactory } from "./audio/plugins/Masterizer";
 import { SaturationFactory } from "./audio/plugins/Saturation";
+import { getInstrumentName } from "./components/PatternEditorHelper";
+import { importJsonPreset } from "./presetfile/JsonPreset";
 
 class PeakMeter implements IComponent {
     app: Appl;
@@ -383,6 +385,29 @@ export class Appl extends CommandHost implements IComponent {
         this.recordOffset = 0;
     }
 
+    async createInstrument(instrumentId: string, x: number, y: number) {
+        const instrument = this.song.createInstrument(instrumentId, getInstrumentName(this.song.instruments, instrumentId), x, y, {});
+
+        // If instrument has notes: Create sequence column and empty pattern with default pattern columns
+        const instrumenteer = this.playerSongAdapter.instrumentMap.get(instrument);
+        if (instrumenteer.factory.maxPolyphony > 0) {
+            const column = this.song.createSequenceColumn(instrument);
+            const pa = this.song.createPattern(instrument, "00", 64, 4);
+            this.song.createPatternColumn(pa, instrument, "midinote");
+        }
+
+        // Load default preset bank if exist
+        const instrumentName = instrument.instrumentId.replace(/[\/\\:*?"<>|]/g, "_");
+
+        const instrumentPresetHandle = await getOrCreateDirectory(this.homeDir, "presets", instrumentName)
+
+        const bankHandle = await instrumentPresetHandle.getFileHandle("default.mprs")
+        const bank = await importJsonPreset(bankHandle);
+
+        console.log("Createing instrument with bank", bank)
+        this.song.setInstrumentBank(instrument, bank);
+    }
+
     onInput = (ev: CustomEvent<Float32Array[]>) => {
         const inputs = ev.detail;
         const inputLength = inputs[0].length;

src/commands/Mixer/AddInstrumentCommand.ts

@@ -1,6 +1,7 @@
 import { Appl } from "../../App";
 import { InstrumentFactoryPicker } from "../../components/InstrumentFactoryPicker";
 import { MixerPanel } from "../../components/MixerPanel";
+import { getInstrumentName } from "../../components/PatternEditorHelper";
 import { getOrCreateDirectory, ICommand } from "../../nutz";
 import { importJsonPreset } from "../../presetfile/JsonPreset";
 
@@ -22,43 +23,6 @@ export class AddInstrumentCommand implements ICommand {
         const instrumentId = factory.identifier;
 
         const clickPt = this.component.mixerCanvas.clickPt;
-        const instrument = this.app.song.createInstrument(instrumentId, this.getInstrumentName(instrumentId), clickPt[0], clickPt[1], {});
-
-        // If instrument has notes: Create sequence column and empty pattern with default pattern columns
-        const instrumenteer = this.app.playerSongAdapter.instrumentMap.get(instrument);
-        if (instrumenteer.factory.maxPolyphony > 0) {
-            const column = this.app.song.createSequenceColumn(instrument);
-            const pa = this.app.song.createPattern(instrument, "00", 64, 4);
-            this.app.song.createPatternColumn(pa, instrument, "midinote");
-        }
-
-        // Load default preset bank if exist
-        const instrumentName = instrument.instrumentId.replace(/[\/\\:*?"<>|]/g, "_");
-
-        const instrumentPresetHandle = await getOrCreateDirectory(this.component.app.homeDir, "presets", instrumentName)
-
-        const bankHandle = await instrumentPresetHandle.getFileHandle("default.mprs")
-        const bank = await importJsonPreset(bankHandle);
-
-        console.log("Createing instrument with bank", bank)
-        this.app.song.setInstrumentBank(instrument, bank);
-    }
-
-    getInstrumentName(instrumentId: string): string {
-        const ls = instrumentId.lastIndexOf("/");
-
-        const baseName = instrumentId.substring(ls + 1);
-        let name = baseName;
-        let counter = 2;
-        while (this.instrumentNameExists(name)) {
-            name = baseName + "-" + counter;
-            counter++;
-        }
-
-        return name;
-    }
-
-    instrumentNameExists(name: string) {
-        return this.app.song.instruments.findIndex(i => i.name === name) !== -1;
+        const instrument = this.app.createInstrument(instrumentId, clickPt[0], clickPt[1]);
     }
 }

src/components/MixerCanvas.ts

@@ -272,7 +272,7 @@ export class MixerCanvas implements IComponent {
         return;
     };
 
-    onContextMenu = (e: MouseEvent) => {
+    onContextMenu = async (e: MouseEvent) => {
         console.log("onContextMenu")
 
         const p: PointType = [ e.offsetX, e.offsetY ];
@@ -288,17 +288,34 @@ export class MixerCanvas implements IComponent {
             // create menu with instrument factory parameter
             const mixerMenu: MenuItem[] = [ {
                 label: "Create Instrument...",
-                action: "add-instrument"
+                items: []
+            },
+            {
+                label: "Create Effect...",
+                items: []
             }];
 
-            this.app.contextMenuContainer.show(this.commandHost, rc.left + e.offsetX, rc.top + e.offsetY, mixerMenu);
+            for (let factory of this.app.instrumentFactories) {
+                const index = factory.maxPolyphony > 0 ? 0 : 1;
+                mixerMenu[index].items.push({
+                    label: factory.identifier,
+                    action: factory.identifier,
+                });
+            }
+
+            mixerMenu[0].items.sort((a, b) => a.label.localeCompare(b.label));
+            mixerMenu[1].items.sort((a, b) => a.label.localeCompare(b.label));
+
             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]);
+
             return;
         }
 
-        this.app.contextMenuContainer.show(this.commandHost, rc.left + e.offsetX, rc.top + e.offsetY, instrumentMenu);
         e.preventDefault();
+        await this.app.contextMenuContainer.show(this.commandHost, rc.left + e.offsetX, rc.top + e.offsetY, instrumentMenu);
     };
 
     onDblClick = (e: MouseEvent) => {

src/components/PatternEditorHelper.ts

@@ -461,4 +461,22 @@ export function getNoteForKey(code: string, octave: number) {
     }
 
     return -1;
-}
+}
+
+export function getInstrumentName(instruments: InstrumentDocument[], instrumentId: string): string {
+    const ls = instrumentId.lastIndexOf("/");
+
+    const baseName = instrumentId.substring(ls + 1);
+    let name = baseName;
+    let counter = 2;
+    while (instrumentNameExists(instruments, name)) {
+        name = baseName + "-" + counter;
+        counter++;
+    }
+
+    return name;
+}
+
+export function instrumentNameExists(instruments: InstrumentDocument[], name: string) {
+    return instruments.findIndex(i => i.name === name) !== -1;
+}

src/nutz/ContextMenuContainer.ts

@@ -31,7 +31,7 @@ export class ContextMenuContainer {
     }
 
     // Returns the action property of the selected menu item, or null if canceled
-    async showPopup(x: number, y: number, menu: NutzMenuItem[]) {
+    async showPopup(x: number, y: number, menu: NutzMenuItem[]): Promise<string | null> {
 
         if (this.resolve) {
             this.resolve(null);